当页面上有多个滑块时，脚本不起作用

Posted 2023-03-14

【中文标题】当页面上有多个滑块时，脚本不起作用

【英文标题】：The script does not work when there is more than one slider on the page

【发布时间】：2022-01-18 15:27:25

【问题描述】：

我在页面上有一个可以切换图像的滑块

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      @if(!empty($article_block_images))
        @foreach($article_block_images as $article_block_image)
          <div class="custom-carousel__title">
            @if($loop->first)
              <span> $article_block_image->title </span>
            @endif
          </div>
        @endforeach
      @endif
      @if(!empty($article_block_images))
        @foreach($article_block_images as $article_block_image)
          <div class="main-image" style="display:  $loop->first ? 'block' : 'none' ">
            <picture>
              <source srcset=" $article_block_image->mobile_image " media="(max-width: 576px)"  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
              <source srcset=" $article_block_image->main_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
              <img src=" $article_block_image->main_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
            </picture>
          </div>
        @endforeach 
      @endif
      <div class="img-to-select">
        @if($articleBlockImagesCount > 1)
          @if(!empty($article_block_images)) 
            @foreach($article_block_images as $article_block_image)
              <div @if($loop->first) class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
                <img src=" $article_block_image->preview_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title " data-main-src=" $article_block_image->main_image " data-mobile-src=" $article_block_image->mobile_image ">
              </div>
            @endforeach 
          @endif
        @endif
      </div>
    </div>
  </div>
</div>

$('.img-to-select__item').click(function () 
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  let index = $(this).index();
  $('.main-image').hide();
  $('.main-image').eq(index).show();
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
);

当页面上只有一个这样的滑块时它可以工作，这里是一个例子

https://jsfiddle.net/a9yvdu75/

这里的代码和我的略有不同，但大体上是一样的

当页面上有两个滑块时，那么一切都不能正常工作，这里是一个例子

https://jsfiddle.net/9std8k3u/

如何解决这个问题？

我试过了

$('.img-to-select__item').click(function () 
  let currentSelection = $(this);

  $('.img-to-select__item').removeClass('selected');
  $(currentSelection).addClass('selected');
  let index = $(currentSelection).index();
  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
  $(currentSelection).closest('.img-to-select').prevAll('.main-image').eq(index).show();
  $(currentSelection).closest('.img-to-select').prevAll('.custom-carousel__title > span').find('span').html($(currentSelection).children('img').attr('data-title'));
);

似乎一切正常，但是当您选择预览图片时，主图片显示的不是您需要的图片，而是相邻图片

【问题讨论】：

我编辑了我的答案

【参考方案1】：

您需要使用 $(this) 从您点击的元素中获取元素。

https://api.jquery.com/closest/

https://api.jquery.com/prevall/

$('.img-to-select__item').click(function () 
  let currentSelection = $(this);
  let imgToSelect = $(currentSelection).closest('.img-to-select');
  let imgURL = $(currentSelection).find('img').attr('src');
  let imgTitle = $(currentSelection).find('img').attr('data-title');
  
  $('.img-to-select__item').removeClass('selected');
  $(currentSelection).addClass('selected');
  
  
  $(imgToSelect).prevAll('.main-image').find('img').attr('src', imgURL);
  $(imgToSelect).prevAll('.custom-carousel__title').find('span').html(imgTitle);
  
  // debug infos
  //console.clear();
  //console.log(imgURL);
  //console.log(imgTitle);
);

.custom-carousel 
  text-align: center;

.main-image > img 
  width:50px;

.img-to-select > .img-to-select__item > img 
  height:30px;
  width: 30px;

.img-to-select 
  overflow: hidden; 
  display: flex; 
  justify-content:space-around;

.img-to-select > .img-to-select__item 
   display: flex; 
   justify-content:space-around;


.img-to-select > .img-to-select__item.selected 
   border: 2px

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk"  data-title="image-a">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk"  data-title="image-a">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs"  data-title="image-b">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss"  data-title="image-c">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM"  data-title="image-d">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"  data-title="image-e">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"  data-title="image-e">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI"  data-title="image-f">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY"  data-title="image-g">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs"  data-title="image-h">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

谢谢）但我只是尝试为我的代码执行此操作，我将其添加到帖子的末尾，但一切对我来说仍然无法正常工作

@ch11 我改了一点代码就可以了

几乎是必须的，我现在有个问题，当你选择一张图片的预览时，不是你需要的那张出现在主图上，而是相邻的那一张

你在sn-p中看到了这个？？？

是的，在 sn-p 中一切正常，但我的 js 代码略有不同，与 sn-p 中的不同，我在一篇文章中写过这个，那个在sn-p中不适合我