Question

我从头开始构建滑块功能。我有一个幻灯片列表，当前幻灯片有一个＆＃34;活动幻灯片类。＆＃34;

<ul class="slides">
   <li class ="active-slide"></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

然后我有一个相应的缩略图列表，当你点击它们时，滑块会显示相应的幻灯片。

 <ul class="thumbnails">
   <li></li>
   <li></li>
   <li></li>
</ul>

所有这一切都正常工作，滑块更改幻灯片并添加类＆＃34; active-slide＆＃34;。我想要做的就是听一下＆＃34; active-slide＆＃34;然后添加一个＆＃34; active-thumb＆＃34;到相应的缩略图，以便用户知道当前激活了哪个缩略图。滑块正在使用上一个，下一个，以及分页，所以我总是在聆听＆＃34; active-slide＆＃34;因为它每10秒变化一次。

我使用的是Backbones.js，并且看起来如何检查活动幻灯片索引，然后添加＆＃34; active-thumb＆＃34;到活动缩略图的相应/匹配索引。

谢谢！

Answer 1

创建自定义属性。

<ul class="slides">
   <li data-index="1" class ="active-slide"></li>
   <li data-index="2"></li>
   <li data-index="3"></li>
   <li data-index="4"></li>
</ul>

<ul class="thumbnails">
   <li data-index="1"></li>
   <li data-index="2"></li>
   <li data-index="3"></li>
   <li data-index="4"></li>
</ul>

当您点击下一个或上一个时：

$(".thumbnails [data-index='" + $('.slides .active-slide').attr('data-index') + "']").addClass("active-thumb");

代码没有经过测试，但我认为你明白了。

修改：

删除活动。保存当前索引。删除所有活动并使用先前保存的当前索引再次应用活动。

// assume we click next
var currentIndex = $('.slides .active-slide').attr('data-index');
$(".thumbnails li").removeClass("active-thumb");
$(".thumbnails [data-index='" + (currentIndex + 1) + "']").addClass("active-thumb");

当然，你还需要多一点来检查一下你的幻灯片还是幻灯片，但我相信你能处理它。

幻灯片处于活动状态时，JQuery addClass为缩略图

1 个答案: