Question

所以我想要做的就是根据他们的HTML＆＃34; id＆＃34;的价值显示一系列图像。 attribute，也是其图像文件的名称。我编写了一个Javascript代码，它将为系列中的每个图像构建src url（忽略愚蠢的类名称）：

var idnum = document.querySelectorAll(".trollface")[0].getAttribute("id");

var tribe;
if (idnum < 116903 && idnum > 100000) {
    tribe = "Xana";
} else if (idnum < 213403 && idnum > 200000) {
    tribe = "Hemi";
} else {
    tribe ="Theri";
} 

var icon = document.getElementsByClassName("trollface");
for(var i = 0; i < icon.length; i++) {
    icon[i].src = "Dot_files/" + tribe + "/Icons/" + idnum + ".png";
}

这很好用，但正如你所看到的，所有图像都会与系列中的第一张图像具有相同的src，这不是我想要的。

我遇到的主要问题是获取每个img id属性的值，并将其用于自己的img src网址。

我已尝试使用

迭代id＆＃39

var idnum = document.querySelectorAll(".trollface");
for(var x = 0; x < idnum.length; x++) {
    idnum[x].getAttribute("id");
}

但在Chrome中，idnum的值是＆＃34; [object％20NodeList]＆＃34;，我认为它是一个对象NodeList。这反过来导致ERR_FILE_NOT_FOUND（或类似的东西），因为输出url变为Dot_files/Theri/Icons/[object%20NodeList].png，它不存在。

有了这个，我尝试将NodeList转换为数组，但在Chrome中仍然得到相同的结果。

所以我想问的是：当我用类getAttribute("id")迭代所有元素时，trollface怎么办不起作用？如果我只使用上面第一个代码段中显示的单行代码，它工作正常。也可以迭代两次，因为我用idnum迭代一次，用icon再次迭代一次。这与我的问题有关吗？

这有解决方法吗？我已经在这几天了，不知道如何继续。

感谢您的帮助，感谢抱歉。如果需要，我可以提供更多细节/解释。

Answer 1

不，它没有。如果连接idnum变量而不是getAttribute方法的返回值，getAttribute返回字符串而不是nodeList，则会得到该结果。您不存储getAttribute调用的返回值，您在哪里使用它们？ idnum[x].getAttribute("id");本身实际上没有做任何事情。该行获得价值并抛弃它。

此外，您似乎没有将if逻辑移动到第二次迭代中。

var idnums = document.querySelectorAll(".trollface");

Array.prototype.forEach.call(idnums, function(el) {
    var tribe, id = el.id;
    if (id < 116903 && id > 100000) {
        tribe = "Xana";
    } else if (id < 213403 && id > 200000) {
        tribe = "Hemi";
    } else {
        tribe ="Theri";
    } 
    el.src = "Dot_files/" + tribe + "/Icons/" + id + ".png";
});

Javascript：getAttribute（）返回对象NodeList？

1 个答案: