Javascript innerHTML 不适用于图像，但适用于文本？

Question

好的，我有一个javascript函数，当用户更改选择下拉框的选项时，它会切换div标签的innerhtml..

文本一切正常，但图像标签停止工作？

工作示例...

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = 'FIVE';
        }
        else if (opt == '4') {
                d.innerHTML = 'FOUR';
        }
        etc...
}

不工作的例子...

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = '<img src='path/img1.jpg'><img src='path/img2.jpg'>';
        }
        else if (opt == '4') {
                d.innerHTML = '<img src='path/img2.jpg'><img src='path/img1.jpg'>';
        }
        etc...
}

这是我的 select 和 div 标签上的内容。

<select onchange='toggle(this.value);'>
<div id='div_tag'></div>

任何人都告诉我我在这里做错了什么，因为我被难住了.. 当所有不同的是一个是另一个是文本时，为什么一个工作而不是另一个工作？？

谢谢。

Answer 1

在我看来，您似乎忘记转义图像路径周围的引号，并且它没有正确读取您的字符串，试试这个

function toggle(opt) {
    var d = document.getElementById('div_tag');
    if (opt == '5') {
            d.innerHTML = '<img src=\'path/img1.jpg\'><img src=\'path/img2.jpg\'>';
    }
etc...

Answer 2

进行这些更改，将开头和结尾的' 替换为"。

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = "<img src='path/img1.jpg'><img src='path/img2.jpg'>";
        }
        else if (opt == '4') {
                d.innerHTML = "<img src='path/img2.jpg'><img src='path/img1.jpg'>";
        }
        etc...
}

您实际上使用的是单引号而不是双引号。 path/img1.jpg、path/img2.jpg 之前没有被视为字符串的一部分。这就是问题所在。

更新 对于你的 php 问题，请这样做：

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = '<img src='+'path/img1.jpg'+'><img src='+'path/img2.jpg'+'>';
        }
        else if (opt == '4') {
                d.innerHTML = '<img src='+'path/img2.jpg'+'><img src='+'path/img1.jpg'+'>';
        }
        etc...
}