比较索引值并将类添加到容器

Question

创建了轮播滑块。我无法想出一个逻辑来比较“slidesjs-index”和“data-item”。如果两个值相同，则将类“active”添加到“carousel-thumb--content”。

我该如何解决这个问题？

轮播滑块：

<div class="slides-item slidesjs-slide" slidesjs-index="0">
 <a href="#">
    <img src="http://placehold.it/1120x632"  />
 </a>
</div>

<div class="slides-item slidesjs-slide" slidesjs-index="1">
  <a href="#">
    <img src="http://placehold.it/1120x632"  />
</a>
</div>

Carousel Div 容器分页：

<div class="carousel-thumb">
  <div class="carousel-thumb--content">
    <a href="#" class="custom-item" data-item="0">
        <div class="carousel-thumb--text">
            <div class="carousel-thumb--title">Lorem ipsum dolor 1</div>
            <div class="carousel-thumb--desc">Ut fringilla augue eget quam lacinia</div>
        </div>
    </a>
  </div>

 <div class="carousel-thumb--content">
    <a href="#" class="custom-item" data-item="1">
        <div class="carousel-thumb--text">
            <div class="carousel-thumb--title">Lorem ipsum dolor 1</div>
            <div class="carousel-thumb--desc">Ut fringilla augue eget quam lacinia</div>
        </div>
    </a>
  </div>
</div>

用于单击功能的脚本工作正常。为这个轮播使用幻灯片 JS 插件。

$('.custom-item').click(function(e){
   e.preventDefault();
   $('.carousel-thumb--content').removeClass('active');
   $(this).parent().addClass('active');
   $('a[data-slidesjs-item=\'' + $(this).attr('data-item') + '\']').trigger('click');
});

Answer 1

首要的经验法则是请不要发明新属性，而应使用 HTML 5 的data-* 属性。所以把你的代码改成：

<div class="slides-item slidesjs-slide" data-index="0">
  <a href="#">
    <img src="http://placehold.it/1120x632" />
  </a>
</div>

<div class="slides-item slidesjs-slide" data-index="1">
  <a href="#">
    <img src="http://placehold.it/1120x632" />
  </a>
</div>

然后使用.data()方法和.closest()来计算和更新你想要的：

$('.custom-item').click(function(e){
   e.preventDefault();
   $('.carousel-thumb--content').removeClass('active');
   $(this).parent().addClass('active');
   $(this).closest('a[data-index=\'' + $(this).attr('data-item') + '\']').trigger('click');
});

注意：您可能需要稍微调整一下我的代码以使其适合您！