javascript - jQuery 类选择器工作不真实？

Question

我正在制作一种进度条/导航元素，显示您当前所在的页面和您访问过的页面。有一个额外的功能可以更改您已经访问过的页面的颜色，但这实际上比您当前的页面“更远”(例如:您已阅读前 16 页，您向后导航到后 8 页，第 9 至 16 页显示为不同的颜色)。

如果您只是向前和向后导航而不跳过，我的实现效果很好。当您跳到某个页面时就会出现问题。当您从那里向后导航时，即使应该应用附加类visited_pa​​ge_gt_current，也不会应用它。当您一页一页地向后导航时，在某个时刻，之前未更改颜色的页面会更改为正确的颜色(一次多个页面)。

更改类的代码:

 // remove current page and visited_page_gt_current from all the visited ones to be sure
    $(".visited_page").removeClass("current_page visited_page_gt_current");

 // add current page and visited page classes to the current element
    $("#pbar_elem"+i).addClass("current_page visited_page");

 //add visited_page_gt_current to all visited pages that are "further" than the current page
    $(".visited_page").slice(i-1, 15).addClass("visited_page_gt_current");

我做了一个简化的 JSFiddle 来演示这个问题:http://jsfiddle.net/eQY3h/30/

我尝试过的事情:

• 使用不同的方法来获取 div，我需要更改颜色:切片、使用 :gt()-选择器、获取 ID 并使用 first() & :not('.visited_pa​​ge') 来获取div 是第一个未访问页面之后的 .visited_pa​​ges 。

• 以上所有方法都以类似的方式工作，但在跳过后都失败:选择器在跳过后只给出空结果，直到到达某个点并再次给出正确的 ID

Answer 1

问题在于.slice的想法是错误的。它不应应用于.visited_pa​​ge，而应应用于所有页面；切片后对 .visited_pa​​ge 进行过滤。所以这会起作用:

$(".pbar_elem").slice(i - 1)
    .filter(".visited_page").addClass("visited_page_gt_current");

另一个等效版本是这样做:

$("#pbar_holder"+i).nextAll()
    .find(".visited_page").addClass("visited_page_gt_current");