使用JavaScript或jQuery,如何通过更改搜索栏(输入范围滑块)的值来显示所选类的图像(并隐藏该类的所有其他图像)?
选择value1时,应显示image1,隐藏所有其他图像等
答案 0 :(得分:1)
欢迎使用StackOverflow。 试用此JS Bin进行演示。
当输入滑块元素的值发生变化时,我们将该值用作具有类名"图像"的图像的索引。然后我们隐藏所有这些图像,并显示与所选索引相对应的图像。
你可以使用vanilla Javascript(没有jQuery)或 jQuery。
<强> JAVASCRIPT 强>
var slider = document.getElementById('image-slider');
slider.addEventListener('change', function(){
var images = document.getElementsByClassName('image');
var index = this.value;
for (var i = 0; i < images.length; i ++) {
images[i].style.display = 'none';
}
images[index].style.display = 'block';
}, false)
<强> JQUERY 强>
$('#image-slider').on('input', function(){
var index = this.value;
// hide all the images first
$('.image').hide();
// show selected image
$('.image').eq(index).show();
});
<强> HTML 强>
<div>
<input id="image-slider" type="range" min="0" max="4" step="1" value="1">
<img class="image" src="http://www.funnycatpix.com/_pics/Whaaa_Hahaha244_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/This_Pizza_Box_Is_Great_t.jpg" alt="">
<img class="image" src="http://www.funnycatpix.com/_pics/Kitten_Cuddlers_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/First_Time_In_The_Grass_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/Play_With_Me_Instead435_t.jpg" alt="" hidden>
</div>