Question

这是一个由两部分组成的问题。我正在为项目使用jQuery，并希望单击一个链接并将类名称“突出显示”切换到该链接，并切换到与该链接的 rel 属性具有相同ID的div。然后我希望能够链接到下一个没有“高亮”类名的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');
  }
});

请注意，如果最终面板已突出显示，则此代码不更新href的{{1}}属性，但将其删除。添加环绕行为是一项微不足道的练习，因此突出显示最终面板将链接回第一个面板。

关于奇怪语法a#next-unhighlighted的注释：如果jQuery集合if (nextDiv[0])中的第一个元素存在，那么集合中至少有一个元素。这与nextDiv的行为类似（但不完全相同），但略微更快，更小。

正如评论中所讨论的，要将每个面板链接到下一个未突出显示的面板，请将nextDiv.length > 0添加到每个面板的HTML中，然后将这样的内容添加到主点击处理程序中：

<a rel="next-panel">Next panel</a>

根据您的项目要求，您需要初始化每个$('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 wrap到第一个。

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

1 个答案: