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

时间:2015-08-31 14:00:56

标签: javascript jquery html

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

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

1 个答案:

答案 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>