选择与点击链接的rel属性具有相同ID的div

Question

这是一个由两部分组成的问题。我正在使用jQuery作为项目，并希望单击一个链接并将类名称“highlight”切换到该链接，并且还将该链接的属性设置为与链接属性相同的ID。然后我希望能够链接到没有“高亮”类名的下一个div。这里是它的HTML：

<ul> 
    <li><a href="#" rel="panel1">Item 1</a></li> 
    <li><a href="#" rel="panel2">Item 2</a></li> 
    <li><a href="#" rel="panel3">Item 3</a></li> 
</ul> 

<a href="">go to next div without class of highlight</a> 


<div id="panel1">some text</div> 
<div id="panel2">some text</div> 
<div id="panel3">some text</div> 

任何人都可以帮助jQuery的一面吗？

非常感谢提前！

Answer 1

假设HTML这样的：

<ul> 
    <li><a href="#" rel="panel1">Item 1</a></li> 
    <li><a href="#" rel="panel2">Item 2</a></li> 
    <li><a href="#" rel="panel3">Item 3</a></li> 
</ul> 

<a id="next-unhighlighted">Go to next div without class "highlight"</a> 

<div class="panel" id="panel1">Panel 1</div> <!-- Note the added --> 
<div class="panel" id="panel2">Panel 2</div> <!-- "panel" classes --> 
<div class="panel" id="panel3">Panel 3</div> 

您可以使用JS是这样的：

$('ul li a').click(function() { 
    var $this = $(this), // <a> 
     id = $this.attr('rel'), 
     nextUnhighlighted = $('#next-unhighlighted'), // <a> 
     targetDiv = $('#' + id), 
     nextDiv; 

    // Un/highlight the clicked link 
    $this.toggleClass('highlight'); 

    // Un/highlight the div related to the target link 
    targetDiv.toggleClass('highlight'); 

    // Update nextUnhighlighted to point to next unhighlighted div 
    nextDiv = $('div.panel:not(.highlight)'); 
    if (nextDiv[0]) { // A next sibling was found 
    nextUnhighlighted.attr('href', '#' + nextDiv.attr('id')); 
    } else { 
    nextUnhighlighted.removeAttr('href'); 
    } 
}); 

需要注意的是，如果最终板已经凸显，那么这段代码不更新a#next-unhighlighted的href属性，但将其删除。添加环绕行为是一项简单的练习，例如突出显示最终面板将链接回第一个面板。

关于奇数语法的说明if (nextDiv[0])：如果jQuery集合nextDiv中的第一个元素存在，则集合中至少有一个元素。这与nextDiv.length > 0的行为类似（但不完全相同），但稍微更快更小。

---

正如在评论中讨论的那样，每个面板链接到下一个未加亮的一个，加<a rel="next-panel">Next panel</a>到每个面板的HTML，再加入这样的事情主要click处理程序：

$('div.panel a[rel="next-panel"]').each(function() { 
    var $this = $(this), 
     nextPanel = $this.parent().next('div.panel:not(.highlight)'); 
    if (nextPanel[0]) { 
    $this.attr('href', '#' + nextPanel.attr('id')); 
    } 
}); 

根据你的项目需求，你需要初始化这些链接中的每一个（否则他们只会在第一次点击之后初始化），并且你可能想让最后一个面板的; oml环绕到第一个。