1

У меня есть вот такая максимально простая галерея:

$(".show-image").click(function() {
    event.preventDefault();
    var mainImage = $(this).index(); 
    $('.images img').removeClass('active');
    $('.images img').eq(mainImage).addClass('active'); 
});
.images img {display: none}
.images .active {display: block}
.thumbs {display: flex; margin-top: 5px;}
.thumbs .img-container {
  margin-right: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-side-grid">
        <div class="img-container images">
            <img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
            <img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
            <img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
    </div>
    <div class="thumbs">
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
      </div>
    </div>
</div>

Но на моей странице мне нужно таких сразу несколько, однако при дублировании кода, jQuery удаляет класс "active" со всех блоков, а добавляет его только на самый первый на странице:

$(".show-image").click(function() {
    event.preventDefault();
    var mainImage = $(this).index(); 
    $('.images img').removeClass('active');
    $('.images img').eq(mainImage).addClass('active'); 
});
.images img {display: none}
.images .active {display: block}
.thumbs {display: flex; margin-top: 5px;}
.thumbs .img-container {
  margin-right: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-side-grid">
        <div class="img-container images">
            <img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
            <img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
            <img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
    </div>
    <div class="thumbs">
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
      </div>
    </div>
</div>
<div class="center-side-grid">
        <div class="img-container images">
            <img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
            <img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
            <img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
    </div>
    <div class="thumbs">
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
      </div>
    </div>
</div>
<div class="center-side-grid">
        <div class="img-container images">
            <img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
            <img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
            <img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
    </div>
    <div class="thumbs">
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
      </div>
      <div class="img-container show-image">
          <img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
      </div>
    </div>
</div>

Могу ли я как-то заставить работать этот скрипт внутри каждого контейнера отдельно? И если да, то как? Дублировать скрипты с разными классами не вариант...

1 ответ 1

2

$(".show-image").click(function() {
  event.preventDefault();
  var mainImage = $(this).index();
  $(this).parent('.thumbs').children(this).removeClass('active_a');
  $(this).parent('.thumbs').children(this).eq(mainImage).addClass('active_a');
  $(this).parent('.thumbs').prev('.images').children('img').removeClass('active');
  $(this).parent('.thumbs').prev('.images').children('img').eq(mainImage).addClass('active');
});
.center-side-grid {
  margin-bottom: 5px;
}
.images img {
  display: none
}

.images .active {
  display: block
}

.thumbs {
  display: flex;
  margin-top: 5px;
}

.thumbs .img-container {
  margin-right: 2px;
  width: 50px;
  height: 50px;
}

.active_a {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="center-side-grid">

  <div class="img-container images">
    <img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
    <img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
    <img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
  </div>

  <div class="thumbs">
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
    </div>
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
    </div>
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
    </div>
  </div>
</div>

<div class="center-side-grid">
  <div class="img-container images">
    <img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
    <img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
    <img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
  </div>
  <div class="thumbs">
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
    </div>
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
    </div>
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
    </div>
  </div>
</div>
<div class="center-side-grid">
  <div class="img-container images">
    <img src="http://dummyimage.com/154x60&text=1" alt="center-side__img" class="center-side__img active">
    <img src="http://dummyimage.com/154x60&text=2" alt="center-side__img" class="center-side__img">
    <img src="http://dummyimage.com/154x60&text=3" alt="center-side__img" class="center-side__img">
  </div>
  <div class="thumbs">
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=1" alt="center-side__img" class="center-side__img">
    </div>
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=2" alt="center-side__img" class="center-side__img">
    </div>
    <div class="img-container show-image">
      <img src="http://dummyimage.com/50x50&text=3" alt="center-side__img" class="center-side__img">
    </div>
  </div>
</div>

4
  • 1
    Почему бы не использовать .closest до родителя, потом findом брать нужные элементы? И да, :eq() как селектор c JQ 3.4+ устарел, лучше юзать .eq(). А так +, хорошее решение
    – De.Minov
    3 мая 2021 в 11:25
  • .eq() был добавлен в 1.1.2, так что можно смело использовать. Насчёт .parent() и .clildren() про их особенности нужно читать, ибо если изменить вёрстку так, что один из элементов изменит уровень вложения, то .parent или .children могут перестать работать)
    – De.Minov
    3 мая 2021 в 11:42
  • @Sevastopol' Скажите пожалуйста, если мне нужно будет накидывать "active" на "show-image", как прописать эти две строки?
    – Alexandr
    3 мая 2021 в 11:57
  • Разобрался, спасибо за пояснение, прочитал документацию
    – Alexandr
    3 мая 2021 в 12:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.