javascript - 使用 querySelector 在 for 循环中获取属性

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 的第二个参数是索引。

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