上一個和下一個同級JavaScript

Question

好的，所以我一直在研究“ Jon Duckett”的書《 JavaScript和jQuery交互式前端開發》

我在第210頁的“上一個和下一個兄弟”上，如何更改導航下拉子菜單中的li.a屬性，我刪除了所有空白，以便它不會像這樣拾取HTML中不需要的任何textNode。

<ul>
  <li>
    <a href="#" class="subLinks" id="subWeb">Web Development</a>
  </li>
  <li>
    <a href="#" id="subGraph" class="subLinks">Graphic Design</a> 
  </li> 
  <li>
    <a href="#" class="subLinks"id="subProto">Prototypes</a>
  </li>
  <li>
    <a href="#" class="subLinks" id="subFun">Fun Stuff</a>
  </li>
</ul>

我從書中添加了JavaScript來更改類屬性的值，但是我對此感到很麻煩，它無法正常工作，但是當我將id更改為<li> ，前一個和下一個兄弟姐妹消失了。 我感到困惑，因為代碼看起來正確，當我給<li>一個id時，它可以在另一個網頁上工作。 但似乎在這里沒有工作，這很奇怪。 任何幫助使這項工作都將非常感謝

/*Javascript
Previous and Next Sibling for portfolio subLinks,
=====================================================================*/

var startItem = document.getElementById('subGraph');
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;

/*change the value of the siblings class Attributes
=====================================================================*/

prevItem.className = 'checkIcon';
nextItem.className = 'altSubLinks1';

/*CSS
============================*/

.checkIcon{
    background-color: teal;
    color:#FFF;
    text-shadow: 2px 2px 1px #3b6a5e;
    border-top:1px solid #7ee0c9;
    border-top: 1px solid #3b6a5e;
    content: '\f00c';
    position: absolute;
    font-family: fontAwesome;
    right: 5px;
    line-height:50px;
    color:#FFF;
}

.altSubLinks1{
    background-color: #FFF;
    color: #000;
}

Answer 1

您的標記全部打包並且沒有縮進的事實（由於我知道的textNodes），使得很難看到您要匹配的元素沒有兄弟姐妹。

看一下縮進標記：

<ul>
  <li><a href="#" class="subLinks" id="subWeb">Web Development</a></li>
  <li><a href="#" id="subGraph" class="subLinks">Graphic Design</a></li>
  <li><a href="#" class="subLinks" id="subProto">Prototypes</a></li>
  <li><a href="#" class="subLinks" id="subFun">Fun Stuff</a></li>
</ul>

請注意， subGraph是沒有兄弟姐妹的<a>標記。 只有<li>有兄弟姐妹。

因此，您必須在<li>標記上設置id或使用parentElement導航到它們。

parentElement示例：

 var startItem = document.getElementById('subGraph'); var prevItem = startItem.parentElement.previousSibling; var nextItem = startItem.parentElement.nextSibling; prevItem.className = 'checkIcon'; nextItem.className = 'altSubLinks1'; 

 .checkIcon { color:red; } .altSubLinks1 { color:green; } 

 <ul><li><a href="#" class="subLinks" id="subWeb">Web Development</a></li><li><a href="#" id="subGraph" class="subLinks">Graphic Design</a></li><li><a href="#" class="subLinks"id="subProto">Prototypes</a></li><li><a href="#" class="subLinks" id="subFun">Fun Stuff</a></li></ul>