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");