我有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();
});
答案 0 :(得分:3)
value
分配相同的图像ID .image__content
的每个内部,您以内部元素为目标时,始终使用$(***, this);
引用父元素,这意味着:“此特定.image__content 的后代li>
.is-active
来处理活动图像的状态.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>