使用 jQuery 更改图像 src

Question

我正在替换旧应用程序中的一些代码，而不是通过它的 id 获取节点，而是通过它的类获取它。因为没有一个好的方法可以通过原生 JS 中的类来获取节点，所以我使用 jQuery 来获取节点，但是新代码不会更改 img src。

有明显的原因吗？

旧代码：

var gamearea = document.getElementById('gamearea')
var images = gamearea.getElementsByTagName('img');
images[place] = "pics/" + id + ".png";

新代码：

$('.gamearea').children('img').eq(place).src = "pics/" + id + ".png";

Answer 1

function updateGameAreaImages(id, place) {
    var gameareas = toArray(document.getElementsByClassName('gamearea'));
    gameareas.forEach(updateImages);

    function updateImages(elem) {
        var images = elem.getElementsByTagName("img");
        images[place].src = "pics/" + id + ".png";
    }
}

function toArray(obj) {
    var arr = [];
    for (var i = 0, len = obj.length; i < len; i++) {
        arr[i] = obj[i];
    }
    return arr;
}

Answer 2

尝试：

$('.gamearea').children('img').eq(place)[0].src = "pics/" + id + ".png";

或：

$('.gamearea').children('img').eq(place).attr("src", "pics/" + id + ".png");

$('.gamearea').children('img').eq(place) 返回元素的 jQuery“数组”，您无法直接访问此对象上的 DOM 属性。您需要使用 [0] （第一个元素）拉取 DOM 元素，或者使用 jQuery api 中的方法，在本例中是 .attr()。

另外，如果您要替换 getElementById('gamearea')，您可能会使用 $('#gamearea') 而不是 $('.gamearea') ;

Answer 3

.eq() 返回一个 jQuery 对象。如果您想直接使用 .src 属性，则需要一个 DOM 元素（不是 jQuery 对象），您可以使用 .get() 而不是 .eq() 像这样：

$('.gamearea').find('img').get(place).src = "pics/" + id + ".png";

我还切换到 .find() 而不是 .children() 更相当于 .getElementsByTagName( ) 原始版本中的内容由于您没有向我们展示您的 HTML，因此这似乎是一个更安全的假设。

Answer 4

我知道这是一个旧答案，但肯定这是一个更好的方法......

$('.gamearea').children('img').attr("src", "pics/" + id + ".png");