Question

我正在制作一种进度条/导航元素，用于显示您当前所在的页面和您访问过的页面。还有一个额外的功能是更改您已访问过的页面的颜色但实际上比当前页面的“更远”（例如：您已阅读前16页，导航回到后面8，页面9到16显示为不同的颜色）。

如果您只是向前和向后导航而不跳过，我的实现工作正常。跳到页面时会出现问题。当您从那里向后导航时，即使它应该，也不会应用附加类visited_page_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（）＆amp; ：not（'。visited_page'）在第一个未访问的人之后得到.visited_pages的div。
所有上述工作都是类似的方式但跳过后都失败了：选择器只是在跳过后给出空结果，直到某个点到来并再次给出正确的ID

Answer 1

问题在于.slice的想法是错误的。它不应该应用于.visited_page，而应该应用于所有页面;在切片后过滤.visited_page 。所以这会奏效：

$(".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");

jQuery类选择器不可思议地工作？

1 个答案: