Функция JavaScript для «получения элемента по родительскому классу» и назначения

Question

Мое затруднение довольно простое: эта функция получает элемент id из 'this' <li> на основе родительского элемента id из <ul>. Раньше он работал нормально, но не больше, мне нужно будет либо <ul> использовать class es вместо id, но при этом все еще иметь возможность назначить id 'current' для текущего элемента, или изменить мой CSS.

function myFunction(element) {
  liArray = document.getElementById("leftlist").childNodes;
  i = 0;
  while (liArray[i]) {
    liArray[i].id = "";
    i++;
  }
  element.id = "current"; // or element.className  ?
}

ul#leftlist {
  background-color: rgb(205, 205, 205);
}

ul#leftlist li#current a {
  color: rgb(96, 176, 255);
  background-color: 218, 218, 218);
}

ul#leftlist li a {
  color: rgb(86, 86, 86);
}

#leftlist a:link {
  color: rgb(86, 86, 86);
  background-color: #ddd;
}

#leftlist a:active {
  color: rgb(96, 176, 255);
  background-color: rgb(218, 218, 218);
}

<ul id="leftlist">
  <li onClick='myFunction(this);'>
    <a href="123" bla bla </a></li>
  <li onClick='myFunction(this);'> .... etc.</li>
</ul>

Возможно, мне нужно изменить мой CSS. Раньше это работало, но сейчас текущий id не действует, поскольку ul#leftlist li a имеет приоритет, даже когда я назначаю id="current" через JavaScript.

Answer 1

Вы должны использовать классы для таких вещей, как "current", а не id. Идентификатор обычно не должен меняться, а «current» не очень хороший идентификатор, так как вы можете иметь кучу вещей на странице, которая в некотором роде является «current». Если вам нужен какой-то стиль CSS, чтобы переопределить другой, вы можете принудительно установить его с помощью! Important:

ul#leftlist li.current a {
  color: rgb(96,176,255) !important;
  background-color:218,218,218) !important;
}

Answer 2

Я бы предложил вам использовать фреймворк jQuery. Это обеспечит хорошую абстракцию над вашей DOM и упростит вам поиск объектов в вашей DOM и назначение событий этим объектам.

Попробуйте прочитать этот урок на jQuery.com . Я уверен, что это поразит вас:)

Answer 3

Вносите ли вы свои изменения таким образом, чтобы в итоге получилось более одного элемента с одинаковым идентификатором? -)

Это явно противоречит всей идее, используя идентификаторы, они должны быть полностью уникальными в контексте html-документа ...

- первое, что вам нужно сделать, это убедиться, что вы обращаетесь только к своим li-элементам:

liArray=element.parentNode.getElementsByTagName("li");

Во-вторых, это может быть идея, чтобы обеспечить более высокий приоритет для одного из ваших селекторов, установив что-то большее в селекторе:

Наивысший приоритет достигается, если вы используете встроенный атрибут стиля в теге, но здесь это, похоже, не имеет смысла.

Идентификаторы дают высокий приоритет, класс - справедливый приоритет, а элементные и псевдоселекторы - низкий приоритет ...

Однако каждый тип приоритета накапливается, и таким образом вы можете дать одному селектору очень высокий приоритет, предшествуя другому с тем же типом приоритета:

ul#leftlist дает 1 балл с высоким приоритетом и 1 балл с низким приоритетом

#myParent ul#leftlist дает 2 балла с высоким приоритетом и 1 с низким

.myParent ul#leftlist дает 1 балл с высоким приоритетом, 1 балл с справедливым приоритетом и 1 балл с низким приоритетом

Таким образом, вы можете различать приоритет для ваших селекторов в таблице стилей! -)

Answer 4

Функция меняется на:

function myFunction(element){
  var liArray = document.getElementById("leftlist").childNodes;
  var i=0, item;
  while (item = liArray[i++]) {
    if (item.nodeType === 1) {
      item.className = item.className.replace(/(^| )current( |$)/g, '');
    }
  }
  element.className += " current";
}

CSS также нуждается в изменении класса:

ul#leftlist li.current a { ... }

Answer 5

Похоже, вам нужно изменить одну строку в вашем CSS:

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color:218,218,218);}

Он пропускает rgb( после background-color и должен выглядеть следующим образом:

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color: rgb(218,218,218);}

Я бы тоже согласился с Эрлендом, current будет лучше подходить для класса.