Изменение изображения SRC с помощью JQuery

Question

Я заменяю некоторый код в старом приложении, и вместо того, чтобы получить узел по его идентификатору, я получаю его по его классу.Поскольку не существует хорошего способа получить узел по классу в нативном 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 для этого объекта. Вам нужно либо извлечь элемент DOM с помощью [0] (первый элемент), либо использовать метод из API jQuery, в этом случае .attr().

Кроме того, вы можете использовать $('#gamearea') вместо $('.gamearea'), если заменяете getElementById('gamearea');

Answer 3

Я знаю, что это старый ответ, но, конечно, это лучший способ ...

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

Answer 4

.eq() возвращает объект jQuery. Если вы хотите использовать свойство .src напрямую, вам нужен элемент DOM (не объект jQuery), для которого вы бы использовали .get() вместо .eq(), например:

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

Я также переключился на .find() вместо .children(), чтобы он был более эквивалентен .getElementsByTagName(), который был у вас в исходной версии, и, поскольку вы не показали нам свой HTML, это более безопасное предположение.