javascript - .each 函数不在最后一个元素上运行

Question

我有 2 个带有 .image__content 类的 div ，其中有一些具有唯一 ID 的图像。我需要隐藏所有图像，并且只显示每个 .image__content 中的 1 个图像，此时您可以看到所有图像。

下面的代码旨在获取它所做的每个 .image__content ，然后为每个 .image__content 单独运行代码，从选择选项中获取当前图像 ID找到具有相同 id 的图像并显示该图像并隐藏其余图像。

但是，目前它仅适用于最后一个 .image__content，因此它完全按照我想要的方式工作，但仅适用于第二个 .image__content 和第一个 div 它隐藏了所有图像，甚至不显示一个。

那么我如何才能运行该函数并使其对 .image__content 都适用？

<div class="image__content">
  <div class="images">
    <img class="image image-1">
    <img class="image image-2">
    <img class="image image-3">
  </div>

<form>
  <select class="image__select">
    <option value="1">Image 1</option>
    <option value="2">Image 2</option>
    <option value="3">Image 3</option>
  </select>
</form>
</div>

<div class="image__content">
  <div class="images">
    <img class="image image-4">
    <img class="image image-5">
    <img class="image image-6">
  </div>

<form>
  <select class="image_select">
    <option value="4">Image 4</option>
    <option value="5">Image 5</option>
    <option value="6">Image 6</option>
  </select>
</form>
</div>

  $('.image__content').each(function() {

      var s = $('form').find('.image_select').val();

      console.log(s);

      var imageId = '.image-'+ s;
      $(".image").hide();
      $(imageId).show();

  });

Answer 1

• 为选项值分配相同的图像 ID
• 在.image__content的每个内部，当您定位内部元素时，请始终使用$(***, this);引用父元素，含义:< em>“此特定 .image__content 的后代
• 创建 CSS 类 .is-active 来处理事件图像的状态
• 使用 jQuery 的 .trigger() 来初始化

$('.image__content').each(function() {

  const $images = $('.image', this);         // Cache your selectors
  const $select = $('.image__select', this); // Reference using: this

  $select.on('change', function() {
    const $img = $images.filter(`#${this.value}`); // Get the one!
    $images.not($img).removeClass("is-active");    // Hide other images
    $img.addClass("is-active");                    // Show the one!
  }).trigger('change');

});

.image__content .image {
  display: none;
}

.image__content .image.is-active {
  display: block;
}

<div class="image__content">
  <div class="images">
    <img id="a_1" class="image" src="https://placehold.it/100x100/0bf?text=1">
    <img id="a_2" class="image" src="https://placehold.it/100x100/f0b?text=2">
    <img id="a_3" class="image" src="https://placehold.it/100x100/b0f?text=3">
  </div>

  <select class="image__select">
    <option value="a_1">Image 1</option>
    <option value="a_2">Image 2</option>
    <option value="a_3">Image 3</option>
  </select>
</div>

<div class="image__content">
  <div class="images">
    <img id="b_1" class="image" src="https://placehold.it/100x100/fb0?text=4">
    <img id="b_2" class="image" src="https://placehold.it/100x100/bf0?text=5">
    <img id="b_3" class="image" src="https://placehold.it/100x100/0fb?text=6">
  </div>

  <select class="image__select">
    <option value="b_1">Image 4</option>
    <option value="b_2">Image 5</option>
    <option value="b_3">Image 6</option>
  </select>
</div>

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