Question

我有2个div类的.image__content，其中有一些具有唯一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

为选项value分配相同的图像ID
在.image__content的每个内部，您以内部元素为目标时，始终使用$(***, this);引用父元素，这意味着：“此特定.image__content 的后代li>
创建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>

.each函数无法在最后一个元素上运行

1 个答案: