選擇與點擊鏈接的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環繞到第一個。