Question

我是jQuery的新手，我只是在做婴儿用品。目前我正在开发一个自定义滑块，在“li”元素中有5个“div”标签。

HTML

<li class="slider">
    <div class="first inactive text-center">
         <img src="img/wilson-logo.jpg" alt="wilson logo"/>
    </div>
    <div class="second active text-center">
         <img src="img/head-logo.jpg" alt="head logo"/>
    </div>
    <div class="third inactive text-center">
         <img src="img/prince-logo.jpg" alt="prince logo"/>
    </div>
    <div class="second active text-center hide">
         <img src="img/head-logo.jpg" alt="head logo"/>
    </div>
    <div class="third inactive text-center hide">
         <img src="img/prince-logo.jpg" alt="prince logo"/>
    </div>
  </li>

的jQuery

$("#slider").ready(function (){
    var slides = $("#slider").children();

    $("#backwards").click(function(){
        alert(slides.length);
    });
});

我的jQuery警报读取（0）...我期待5，我最终想要完成的是将所有“div”元素放入一个名为“幻灯片”的数组中，然后我希望两个显示三个。但是对于没有，有人可以向我解释为什么它读取0而不是5.谢谢

完成幻灯片的任何建议？ 我已完成滑块，您可以在此处查看示例：页面底部的http://www.iamcavic.com/simon（朋友和合作伙伴）徽标滑块..

我已经学会了一些新的东西，比如像孩子一样通过子元素（'div'）和.each（）循环所有元素，我也学会了.html（）来检索元素的内容。

这是我的 jQuery

$(".slider").ready(function (){

    var images = [], i = 1;

    // Initial loop to get all <img> elements out of child <div> tags
    $(".slider").children('div').each(function() {
        images[i] = $(this).html(); 
        i++;
    });

    // Initialize controls and positions of windows 1,2,3
    var position_one = 1, position_two = 2, position_three = 3, num_images = images.length;

    // Go backwards control
    $("#backwards").click(function(){

        // Check positions for and reset
        if (position_one === 1) {
            position_one = num_images;
        }else if (position_two === 1){
            position_two = num_images;
        }else if (position_three === 1){
            position_three = num_images;};

        // Move position back - 1 on all windows
        position_one--;
        position_two--;
        position_three--;

        $("#one").html(images[position_one]);
        $("#two").html(images[position_two]);
        $("#three").html(images[position_three]);

    });

    // Go forward control
    $("#forwards").click(function(){

        // Check positions for and reset
        if(position_one === (num_images - 1 )){
            position_one = 0;
        }else if(position_two === (num_images - 1 )){
            position_two = 0;
        }else if(position_three === (num_images - 1 )){
            position_three = 0;
        }

        // Move positions forward + 1 on all windows
        position_one++;
        position_two++;
        position_three++;

        $("#one").html(images[position_one]);
        $("#two").html(images[position_two]);
        $("#three").html(images[position_three]);

    });
});

我想知道你会建议什么，我确信有更好的方法可以做到这一点。我对未来项目的任何建议和建议持开放态度。

再次感谢你！

Answer 1

应为$('.slider')。类不是ID。

ID选择器= '#name' 类选择器= '.name'.

Answer 2

您应该使用ready()对象上的document函数。

这就是你想要的：

$(document).ready(function() {
    var slides = $("li.slider").children();

    $("#backwards").click(function(){
        alert(slides.length);
    });
});

Answer 3

#引用了一个id，但是在你的li元素上，slider是一个类，所以你应该使用.引用一个类。

Answer 4

您已使用类.slider定义主div，但在jQuery中，您使用的是ID #slider ...

这是你的javascript修复：

$(".slider").ready(function (){
    var slides = $("#slider").children();

    $("#backwards").click(function(){
        alert(slides.length);
    });
});

在这种情况下你也可以使用$(document).ready(...)，并且当页面准备就绪时将执行代码部分（这就是你想要的原因）

孩子的数量0应该是5我做错了什么？

4 个答案: