The script does not work when there is more than one slider on the page-CodePudding

I have a slider on the page that switches images

<div >
  <div >
    <div >
      @if(!empty($article_block_images))
        @foreach($article_block_images as $article_block_image)
          <div >
            @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  style="display: {{ $loop->first ? 'block' : 'none' }}">
            <picture>
              <source srcset="{{ $article_block_image->mobile_image }}" media="(max-width: 576px)" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
              <source srcset="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
              <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            </picture>
          </div>
        @endforeach 
      @endif
      <div >
        @if($articleBlockImagesCount > 1)
          @if(!empty($article_block_images)) 
            @foreach($article_block_images as $article_block_image)
              <div @if($loop->first)  @else  @endif>
                <img src="{{ $article_block_image->preview_image }}" alt="{{ $article_block_image->image_alt }}" 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'));
});

It works when there is only one such slider on the page, here is an example

https://jsfiddle.net/a9yvdu75/

Here the code is slightly different from mine, but in general the principle is the same

When there are two sliders on the page, then everything does not work correctly, here is an example

https://jsfiddle.net/9std8k3u/

How can this be fixed?

I tried this

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

Everything seems to work, but when you select a preview picture, the main one displays not the one you need, but the neighboring one

CodePudding user response：

You need to get elements from your clicked element with $(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 >
  <div >
    <div >
      <div >
        <span>Title
        </span>
      </div>
      <div >
        <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
      </div>
      <div >
        <div >
          <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <div >
        <span>Title
        </span>
      </div>
      <div >
        <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="" data-title="image-e">
      </div>
      <div >
        <div >
          <img src="hhttps://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="" data-title="image-e">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-f">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-g">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" 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>