通过单击图像更改滑块的值

Question

我想通过点击图像使滑块的值动态变化，例如，当我点击第一张图像时，水平滑块的值应该是 1，第二张图像也是如此，我的解决方案是进行输入隐藏以保存图像的位置并将此值 (positionimgvalue) 放在水平滑块的值中但它不起作用

这是我的代码：

HTML 代码：

<h1>Changing value of slider by clicking on images </h1>
<div id="slider"></div>

<p>Your slider has a value of <span id="slider-value"></span></p>
<input type=hidden name=value value="">
 <ul class="teintestyle">
<li>
 <img border="0" src="http://lorempixel.com/100/81/" width="100" height="81" alt="1" />
</li>

<li>
<img border="0" src="http://lorempixel.com/g/400/200" width="100" height="81" alt="2" />
</li>

<li>
<img border="0" src="http://lorempixel.com/400/200/sports" width="100" height="81" alt="3" />
</li>
<li>
<img border="0" src="http://lorempixel.com/400/200/sports/Dummy-Text" width="100" height="81" alt="4" />

</li>
</ul>

JS代码：

 $('.teintestyle li').click(function(){

          var value = ( $(this).find('img').attr('alt'));


         $( "input[name='value']" ).val(value);


     });
var positionimgvalue =  $( "input[name='value']" ).val();
$("#slider").slider(
{
            value:positionimgvalue,
            min: 0,
            max: 4,
            step: 1,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
            }
}
);

$( "#slider-value" ).html(  $('#slider').slider('value') );

jsfiddle :

jsfiddle

感谢帮助

Answer 1

我不确定你想要什么。可能您想在单击图像时动态更改滑块。我只添加了一行以实用地更改值：

$('#slider').slider('value', value);// changing value of slider

Updated DEMO 单击图像时查看滑块值的变化

Answer 2

请注意下面的 fiddle 回答 - 虽然它解决了你的问题 - 绝对不是这样做的方法。

使用 alt 来存储值是不正确的，因为 alt 标签用于帮助描述图像的内容。

而是查找数据属性，因为这是它们的设计目的。

 $('.teintestyle li').click(function(){

      var val1 = ( $(this).find('img').attr('alt'));


 $("#slider").slider({'value':val1}); // set the value of the slider
 $( "#slider-value" ).html(  $('#slider').slider('value') ); //update the text
 });

Fiddle Demo

Answer 3

您可以为每个 li 使用 index() 而不是获取 attr('alt')

 $('.teintestyle li').click(function(i){   
         var value = $(this).index();
         $('#slider-value').text(value);
         $('#slider').slider('value', value);
     });

DEMO

Answer 4

只需添加

$('#slider-value').text(value);

在

之后

 $( "input[name='value']" ).val(value);

输入是隐藏的，你当然看不到。

通过单击图像更改滑块的值

Changing value of slider by clicking on images

html

css

jquery

jquery-ui-slider

HTML 代码：

JS代码：

jsfiddle :