Question

我正在屏幕右侧为网站创建一种帮助栏。

sidebar help

我有一个类突出显示的索引;如何迭代使用这个＆＃34; next＆＃34;按钮并突出显示每一步？

HTML：

<button id="next-help">Next</button>

<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
    <li>Review, and submit your order when ready</li>
</ul>

jQuery的：

$("#next-help").click(function (){
    //should go to next index in <ul>
});

var listItems = $("#helpBar-list li");

listItems.each(function (index)
{
    //this is how i am looping through entire list, but i don't need to do that
    console.log(index + ": " + $(this).text());
});

Answer 1

怎么样

$("#next-help").on("click",function (){
  $(".highlight").removeClass("highlight").next().addClass("highlight");
});

循环并保存存储索引

$(function() {
  var $list = $("#helpBar-list li");   
  $("#next-help").on("click",function (){
    var idx = $(".highlight").removeClass("highlight").next().index();
    if(idx==-1) idx=0; // here you can do what you want with idx
    $list.eq(idx).addClass("highlight");
  });
});

FIDDLE

＆＃13;

$(function() {
  var $list = $("#helpBar-list li");   
  $("#next-help").on("click",function (){
    var idx = $(".highlight")
      .removeClass("highlight")
      .next()
      .index();
    if(idx==-1) idx=0;
    $list.eq(idx).addClass("highlight");
    console.log(idx);  
  });
});

＆＃13;

.highlight {
	background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="next-help">Next</button>

<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
    <li>Review, and submit your order when ready</li>
</ul>

＆＃13;

Answer 2

还有一个解决方案：

var listItems = $("#helpBar-list li");
var i = listItems.filter('.highlight').index();

$("#next-help").click(function () {
    listItems.removeClass('highlight').eq(++i % listItems.length).addClass('highlight');
});

.highlight {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="next-help">Next</button>
<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
</ul>

Answer 3

在这里，就像这样简单。当它到达终点时它也会循环回到开头：

var listItemCount = $('#helpBar-list li').length; // counts # of <li>
var current = 0; // current <li> index you are on

$('#next-help').on('click', function() {
    // Remove the highlight on the <li> and place it on the next one
    $('#helpBar-list li.highlight').removeClass('highlight').next().addClass('highlight');
    current++;

    // Once it reaches the end, loop back
    if(current == listItemCount) {
        $('#helpBar-list li:first-child').addClass('highlight');
        current = 0;        
    }
});

这里是小提琴：https://jsfiddle.net/1wvd690h/1/

Answer 4

使用addClass，removeClass和next（）

$("#next-help").click(function() {
  $("#helpBar-list")
    .find(".highlight").removeClass("highlight")
    .next("li").addClass("highlight");
});

.highlight {
    background-color: yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="next-help">Next</button>

<ul id="helpBar-list" class="no-indent">
  <li class="highlight">Click on Online PO's</li>
  <li>Select the 'Total' Folder</li>
  <li>Type the name of th Supplier in the filter box</li>
  <li>Open a PO containing the items you need by clicking on the PO Number</li>
  <li>Review the PO Contents</li>
  <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
  <li>Clicky 'Copy &amp; New' in the prompt</li>
  <li>Change quantities as necessary</li>
  <li>Review, and submit your order when ready</li>
</ul>

Answer 5

我认为你最好的选择是创建一个带有id的<li>，这样你就可以遍历它们，否则你的javascript将总是返回所有li或者第一个（或者你也可以得到它）首先，DOESNT有突出显示的类，但这仍然没有你想做的事情）

如果你给它们id，你会发现你的元素用它的类突出显示，并读取它的id，然后删除高亮类。对其id执行+1（找到相关元素）并将高亮类设置为该元素。

如何使用按钮迭代<ul>？

5 个答案: