根据JQuery UI Slider位置更改图像

Question

我在网页上有一张图片，并且想要根据滑块的位置进行更改，我在这里浏览了一些答案，但是并没有涵盖我需要的图像。

到目前为止，我有一个功能良好的滑块和一个图像，但我无法让他们互相交谈：

HTML：

<img src="images/flask_image1.png" alt="Isa lab" id="flask" />

滑块HTML：

<div id="slider1">

脚本：

<script>
  $(function() {
    $( "#slider1" ).slider({
    min: 0,
    max: 4,
    step: 1,
    change: function(event, ui){
        if(ui.value == 1){
            $('flask').attr('src','images/flask_image2.png');
        }else{
            $('flask').attr('src','images/flask_image1.png');
        };
    }
    });
  });
</script>

基本上什么都不做。

我不是JS或JQ用户，所以我很困！

Answer 1

将$('flask')更改$('flask') $('#flask')

Answer 2

$('flask').attr('src','images/flask_image2.png');

您需要在手之前添加#来引用ID为flask的元素

if(ui.value == 1){
    $('#flask').attr('src','images/flask_image2.png');
}else{
    $('#flask').attr('src','images/flask_image1.png');
};

Answer 3

只需将$('flask')更改$('flask') $('#flask')

工作示例： http : //jsfiddle.net/4WEML/1/

Answer 4

问题是您提到ID时不带井号“＃”，如下所示

 $('flask').attr('src','images/flask_image2.png');

这将无法工作 ，因为多数民众赞成在一个ID，您应该使用井号'＃'，所以请尝试以下代码

$(function() {
    $( "#slider1" ).slider({
    min: 0,
    max: 4,
    step: 1,
    change: function(event, ui){
        if(ui.value == 1){
           $('#flask').attr('src','images/flask_image2.png');
        }else{
            $('#flask').attr('src','images/flask_image1.png');
        };
    }
    });
  });

希望这可以帮助....