上一个和下一个同级JavaScript
上一个和下一个同级JavaScript
提问于 2018-06-08 07:44:30
我一直在研究"Jon Duckett“写的”JavaScript和jQuery交互式前端开发“这本书
我在第210页“上一页和下一页”如何更改导航下拉子菜单中的li.a属性，我已经删除了所有空格，这样它就不会在超文本标记语言中拾取任何不需要的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;
}回答 1
Stack Overflow用户
发布于 2018-06-08 07:49:51
您的标记都已打包且未缩进(由于我所知道的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>标记上设置ids，或者使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751545
复制相关文章
相似问题