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