Question

好的，所以我一直在研究“Jon Duckett”的JavaScript和jQuery交互式前端开发书

我在第210页“上一个和下一个同级”如何更改导航下拉子菜单中的li.a属性，我已删除所有空格，以便它不会在HTML中拾取任何不需要的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>

我添加了书中的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>

上一个和下一个兄弟姐妹JavaScript

1 个答案: