使用querySelector在for循环中使用getAttribute

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