Question

我必须使用jQuery制作一个滑块控件。在每张幻灯片中，您可以拥有图片，段落等内容。

<div class="slide first current">
    <h1>Ninja Superman slide</h1>
    <p>Here's some text.</p>
    <img src="http://blogs.telerik.com/images/default-source/miroslav-miroslav/super_ninja.png?sfvrsn=2" width="300" height="300">
</div>
<div class="slide">
    <h1> Ninja Samurai</h1>
    <p>Here's some text about ninja samurais</p>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRVNH4RuAsomFkrv9tWiz_VBaCbVSWbC7gDXtOag9e7K_JHuC6zZR5Es-Y" width="500" height="300">
</div>

<div class="slide last">
    <h1>The birth of a ninja</h1>
    <p>Some text about the birth of a ninja from egg.</p>
    <img src="http://forums.academy.telerik.com/?qa=blob&qa_blobid=5564423925526764256" width="300" height="300">
</div>

我有2个按钮用于上一张和下一张幻灯片。

<input type="button" id="prev-btn" value="Previous slide" />
<input type="button" id="next-btn" value="Next slide" />

在每个div（幻灯片内容）上我有一个类“幻灯片”，所以我可以找到幻灯片。我通过从“幻灯片”类获取文档中的所有元素来创建一个集合。

var $slides = document.getElementsByClassName("slide");

现在我必须在onNextButtonClick（）上创建一个函数，这将改变我的幻灯片。但我不知道如何采取当前的幻灯片。我有一个类“当前”，默认情况下在第一个元素上给出。所以我的问题是：如何从具有特定属性的集合中获取元素。这样的事情：

var $currentSlide = $slides[element.class == "current"];

Answer 1

由于你使用jQuery，我认为你最好使用jQuery选择器来选择元素。您可以通过以下方式选择具有多个类的元素：

var $slides = $(".slide.current");

您可以在此处找到有关如何根据类，属性或状态选择元素的信息 enter link description here

Answer 2

如果具有类current的元素是$slides的子节点，则以下代码将全部选择它们：

$('.current', $slides)

调用$函数的第二个参数是选择器的范围。

如果要获取所有匹配元素的第一个元素，可以按如下方式执行此操作：

$('.current', $slides)[0]

You can see a demonstration here.

Answer 3

最好使用jQuery / sizzle选择器。

var $slides = document.getElementsByClassName("slide");

变为

var $slides = $(".slide");

var $currentSlide = $slides.filter(".current");

Answer 4

要选择当前幻灯片，您可以使用

$(".current")

另外，如果你想要一个简单的方法制作一个滑块，你可以尝试jQuery轨道 http://zurb.com/playground/orbit-jquery-image-slider

Answer 5

您可以在按钮中添加类以获取点击事件

<input class="next-prev-btn" type="button" id="prev-btn" value="Previous slide" />
<input class="next-prev-btn" type="button" id="next-btn" value="Next slide" />

之后获取点击事件

$(".next-prev-btn").on('click',function(){
    // get the clicked button's id
    var clickedButton = $(this).attr('id');
    $('.slide').each(function() {
        if($(this).hasClass('current'))
        {           
           // here you will get the div which have current class 
           // your business logic 

           // you can get your clicked button also by
           if(clickedButton=='prev-btn')
           {
                // your logic for previous button click
           }
           else
           {
                // your logic for next button click
           }

           // if you are done with your functionality you can break the look here to prevent unwanted execution through the loop
           break;
        }
    });
});

Answer 6

也许你应该使用toggle（）; ？

使用jQuery！加入头：

http://www.w3schools.com/jquery/jquery_install.asp

使用jQuery更容易，更快。

如何使用jQuery通过特定的类名从集合中获取元素？

6 个答案: