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

你可以为每个li使用index（）而不是attr（'alt'）

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

DEMO

Answer 3

请注意以下小提琴回答 - 尽管它解决了您的问题 - 绝对不是这样做的方法。

使用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 4

添加

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

之后

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

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

单击图像更改滑块的值

HTML代码：

JS代码：

jsfiddle：

4 个答案: