getAttribute in a for-loop using querySelector

Question

我有这个变量

var carouselItems = document.querySelectorAll(".carouselItem")

这是为了访问这些东西

%div#carouselMain.row
%div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art0"}}
%a{:href => "#"}
%div.featured-number
01
%div.featured-cat
Personal Article
%h3
TITLE
%div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art1"}}
%a{:href => "#"}
%div.featured-number
02
%div.featured-cat
Visual Essay
%h3
TITLE
%div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art2"}}
%a{:href => "#"}
%div.featured-number
03
%div.featured-cat
1st Year Feature
%h3
TITLE
%div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art3"}}
%a{:href => "#"}
%div.featured-number
04
%div.featured-cat
Interview
%h3
TITLE

我创建了一个函数，该函数具有一个 for 循环来访问每个div 和 URL 以获取其他内容，这是 JS 代码：

function marqueeGatherData() {
[].forEach.call(carouselItems, function(index) {
marqueeVars.totalPanels = index + 1
for (var j = 0; j < carouselItems.length; j++) {
if (carouselItems[j].length) {
var panel_image = this.getAttribute("data-image" + ".png"),
panel_caption = this.getElementsByTagName("h3").innerHTML,
panel_link = this.getAttribute("href"),
panel_category = this.querySelectorAll(".featured-cat").innerHTML,
panel_number = this.querySelectorAll(".featured-number").innerHTML
}
}
*random stuff*
})
}

但是当你注意到问题就出现了

console.log(panel_caption)

返回 4 个未定义的值，这意味着变量无法将自身链接到其适当的div。我将如何解决这个问题？我尝试添加 for 循环变量，但这没有任何作用。它与在 DOM 加载之前调用我的函数有什么关系吗？

Answer 1

除非我误解了什么，为什么不简单地做：

function marqueeGatherData() {
carouselItems.forEach(function(item, index) {
marqueeVars.totalPanels = index + 1;
//var panel_image = item.getAttribute("data-image" + ".png"),
var panel_image = item.dataset.image,
panel_caption = item.getElementsByTagName("h3").innerHTML,
panel_link = item.getAttribute("href"),
panel_category = item.querySelectorAll(".featured-cat").innerHTML,
panel_number = item.querySelectorAll(".featured-number").innerHTML;
// random stuff
});
}

forEach 的第二个参数是index。

旁注：item.getAttribute("data-image.png")看起来不正确，因为属性不能包含句点。如果要访问数据属性的值，例如data-image，使用数据集属性，例如item.dataset.image.