我需要使用.each函数的帮助

由 发布于 javascriptjqueryhtml
 收藏

I have 2 div with the .image__content class and within that, I have some images with unique ids. I need to hide all the images and only show 1 image from each .image__content, at the moment you can see all the images.

The code below is meant to get each .image__content which it does and then run the foo function individually for each .image__content, getting the current image id from a select option and finding the image with the same id and displaying that image and hiding the rest.

However, at the moment it only works for the last .image__content, so it does exactly what I want it to do but only for the 2nd .image__content and the first div it hides all the images and doesn't even show one.

那么我将如何运行该函数并使它对于.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>

  <select class="image__select">
    <option value="1">Image 1</option>
    <option value="2">Image 2</option>
    <option value="3">Image 3</option>
  </select>
</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 foo = function() {

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

      console.log(s);

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


    };

  });
评论