Question

创建轮播滑块。我无法找出比较的逻辑＆＃34; slidesjs-index＆＃34; ＆安培; ＆＃34;数据项＆＃34 ;.如果两个值都相同，则添加class＆＃34; active＆＃34;转向＆＃34; carousel-thumb - 内容＆＃34;。

我该如何解决这个问题？

Carousel Slider：

<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');
});

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

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

1 个答案: