javascript - 将 Javascript 转换为 jQuery 不起作用

Question

我在练习文件中用 Javascript 编写了一个基本 slider ，现在尝试通过将其转换为 jQuery 以提高效率，在我的网站中实现它，但是使用 jQuery 时它不起作用。我不知道我错在哪里。

JavaScript

(function Slider() {
var slide = document.getElementsByClassName("slide"),
    dot = document.getElementsByClassName("dot"),
    slideList = [slide[0],slide[1],slide[2]],
    buttonL = document.getElementById('btL'),
    buttonR = document.getElementById('btR'),
    index = 0;

slideList[0].style.display = 'block'; 

(function displayDot() { 
    var dotContainer = document.getElementById('dotContainer'),
        dotHtml ='',
        i;
    for (i = 0; i < slideList.length; i++) {
        dotHtml += '<div class="dot"></div>';
    }
    dotContainer.innerHTML = dotHtml;
}());

dot[0].style.backgroundColor = '#e29f6f'; 

function slideIt(direction) {
    previous = index;

    if (direction === 'right') {
        index++;
        if (index >= slideList.length) {
            index = 0;
        }
    } else if (direction === 'left') {
        index--;
        if (index < 0) {
            index = slideList.length-1;
        }
    }

    slideList[index].style.display = 'block'; 
    slideList[previous].style.display = 'none'; 

    dot[index].style.backgroundColor = '#e29f6f';
    dot[previous].style.backgroundColor = 'grey';
}

buttonR.addEventListener('click', function(){ slideIt('right'); }, false);
buttonL.addEventListener('click', function(){ slideIt('left'); }, false);
}());

jQuery 尝试

$(document).ready(function() {
    var slide = $( ".slide" ),
    dot = $( ".dot" ),
    slideList = [slide[0], slide[1], slide[2]],
    buttonL = $( '#btL' ),
    buttonR = $( '#btR' ),
    index = 0;

    slideList[0].css("display", "block");

    (function displayDots() { 
        var dotContainer = $( "#dotContainer" ),
            dotHtml ='',
            i;
        for (i = 0; i < slideList.length; i++) {
            dotHtml += '<div class="dot"></div>';
        }
        dotContainer.append(dotHtml);
    }());

    dot[0].css("background-color", "#e29f6f");

    function slideIt(direction) {
       previous = index;

       if (direction === 'right') {
           index++;
           if (index >= slideList.length) {
               index = 0;
           }
       } else if (direction === 'left') {
           index--;
           if (index < 0) {
               index = slideList.length-1;
           }
       }

       slideList[index].css("display", "block");
       slideList[previous].css("display", "none");

       dot[index].css("background-color", "#e29f6f");
       dot[previous].css("background-color", "grey");
    }

    buttonL.click(function() {
        slideIt('left');
    });

    buttonR.click(function() {
        slideIt('right');
    });
});

Answer 1

当你做类似的事情时:

$( ".dot" )

你可以这样做:

$( ".dot" ).css(...);

结果是一个 JQuery 集合

但是没有

$( ".dot" )[0].css(...);

$( ".dot")[0] 是一个 DOM 节点

例如，您可以这样做:

var elem = $( ".dot" )[0];
$(elem).css(...);