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')

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')

即可

工作示例：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');
        };
    }
    });
  });

希望这会有所帮助......

根据JQuery UI Slider位置更改图像

4 个答案: