Question

使用JavaScript或jQuery，如何通过更改搜索栏（输入范围滑块）的值来显示所选类的图像（并隐藏该类的所有其他图像）？

选择value1时，应显示image1，隐藏所有其他图像等

Answer 1

欢迎使用StackOverflow。 试用此JS Bin进行演示。

当输入滑块元素的值发生变化时，我们将该值用作具有类名＆＃34;图像＆＃34;的图像的索引。然后我们隐藏所有这些图像，并显示与所选索引相对应的图像。

你可以使用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>

我希望HTML搜索栏有5个值，当值显示image1时，也像值2显示image2

1 个答案: