Question

我正在学习JavaScript。我想要一些代码来改变网页上的图像，具体取决于是从下拉框中选择“图像1”还是“图像2”。这是我到目前为止所做的。

$('#selectname').change(function(){
    if ($(this).val() === "image 1"){
    NEED HELP WITH THIS LINE
    }
    else if ($(this).val() === "image 2"){
    NEED HELP WITH THIS LINE
    }
    NEED HELP WITH SOME KIND OF ACTION HERE?
});

我想我需要让我的代码在更改下拉列表时更改图像文件的名称 - 然后我需要在html文件中将图像名称变为变量。

我只是不确定执行此操作的语法。任何帮助表示赞赏。

Answer 1

假设你有一个像这样的图像标签：

<img src="foo.png" id="imageContainer" />

您的更改侦听器可以执行此操作：

var img = $('#imageContainer');

$('#selectname').change(function(){
    if ($(this).val() === "image 1"){
        img.attr('src', "new_image.png");
    }
    else if ($(this).val() === "image 2"){
        img.attr('src', "another_image.png")
    }
});

jQuery的.attr()方法解决了这个问题。 Docs

用于制作下拉框的JavaScript更改网页图像

1 个答案: