使用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 。