来自 JavaScript 对象的值 returns 空

Question

我正在学习 JavaScript 对象并为自己设置了一个小项目来创建一个滑块。值得注意的是，我来自 jQuery 背景，所以我的问题可能在于我尝试 select 元素的方式。我有以下 HTML:

<div class="slider-viewport" id="mySlider">
    <div class="slides-container">
        <div class="slide">1</div>

        <div class="slide">2</div>

        <div class="slide">3</div>
    </div>
</div>

以及以下 JavaScript：

(function(window, document, undefined){

    // code that should be taken care of right away

    window.onload = init;

    function init(){
        // the code to be called when the dom has loaded

        var slider = {
            sliderViewport: document.getElementById('mySlider'),
            slidesContainer: document.querySelectorAll(this.sliderViewport + ' .slides-container')
        };

        console.dir(slider.sliderViewport + ' .slides-container');
        console.dir(slider.slidesContainer);

        //Just testing to see if I can do something
        slider.slidesContainer.style.color = 'blue';
    }

})(window, document, undefined);

当我查看 Chrome 开发工具时，我得到以下信息：

[object HTMLDivElement] .slides-container
objects.js:16 NodeList[0]
objects.js:18 Uncaught TypeError: Cannot set property 'color' of undefined

第一个console.dir似乎是return我想要的元素。我不确定第二个 console.dir 是什么 returning 以及为什么我得到未定义的错误。请您指导我哪里出错了？

非常感谢。

Answer 1

querySelectorAll和querySelector得到一个字符串参数（css选择器）：

var slider = {
            sliderViewport: document.querySelector('#mySlider'),
            slidesContainer: document.querySelector('#mySlider .slides-container')
        };

Answer 2

querySelectorAll() expects a string as parameter to evaluate as a CSS selector. You can't concat a HtmlDivElement with a string, this is your first problem. The second one is that the querySelectorAll() returns a NodeList 如您在控制台上所见。问题是列表是空的。

您可能想试试这个：

var slider = {
    sliderViewport: document.getElementById('mySlider')
}

slider.slidesContainer: slider.sliderViewport.querySelectorAll('.slides-container');

我没有测试它，但它应该像描述的那样工作 here。

来自 JavaScript 对象的值 returns 空

Value from JavaScript object returns null

javascript

object

undefined