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＆amp;其他东西的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-loop变量，但没有做任何事情。它是否与在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，使用dataset属性，例如item.dataset.image。

使用querySelector在for循环中使用getAttribute

1 个答案: