Question

我制作了一个非常简单的幻灯片。单击箭头将淡出$(this)，下一张幻灯片将fadeIn()使用next()功能。反向反向。

但是，当同一页面上有多个幻灯片时，不似乎无效。

jQuery的：

    $('li').first().siblings().hide();

        $('.next').click(function () {
            $(this)
                .parent('.container')
                .find('li:first-child')
                .fadeOut(function

 () {
            $(this)
                .next()
                .fadeIn()
            $(this)
                .appendTo('ul')
        });

    });

    $('.back').click(function () {
        $(this)
            .parent('.container')
            .find('li:first-child')
            .fadeOut(function () {
            $(this)
                .parent('.container')
                .find('li:last-child')
                .fadeIn()
                .prependTo('ul')
        });

    });

HTML：

<div class="container">
    <ul class="inner_box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="back">back</div>
    <div class="next">next</div>
</div>

<div class="container">
    <ul class="inner_box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="back">back</div>
    <div class="next">next</div>
</div>

Answer 1

尝试

$('.container').find('li:first-child').siblings().hide();

$('.next').click(function () {
    var $this = $(this), $ul = $(this).siblings('ul');

    $ul.find('li:first-child').fadeOut(function () {
        var $this = $(this);
        $this.next().fadeIn();
        $this.appendTo($ul)
    });

});

$('.back').click(function () {
    var $this = $(this), $ul = $(this).siblings('ul');

    $ul.find('li:first-child').fadeOut(function () {
        $ul.find('li:last-child').prependTo($ul).fadeIn()
    });

});

演示：Fiddle

Answer 2

不是隐藏页面上的第一个li，而是遍历每个.inner_box元素并隐藏除了第一个li元素之外的所有元素。

$('ul.inner_box').each(function() {
  $(this).find('li').first().siblings().hide();  
});

Answer 3

新JS（已测试，working in Fiddle）

$('.container').each(function() {

    $(this).find('li').first().siblings().hide();

    $(this).find('.next').click(function () {
        $(this)
            .parent('.container')
            .find('li:first-child')
            .fadeOut(function () {
            $(this)
                .next()
                .fadeIn()
            $(this)
                .appendTo('ul')
        });

    });

    $(this).find('.back').click(function () {
        $(this)
            .parent('.container')
            .find('li:first-child')
            .fadeOut(function () {
            $(this)
                .parent('.container')
                .find('li:last-child')
                .fadeIn()
                .prependTo('ul')
        });

    });

});

所以基本上你将整个事物包装在$('.container').each中并调整内部的选择器，这样它就可以为.container的每个实例执行一次整个事情，并且它们不会相互干扰。

循环遍历两个不同的列表 - jQuery

3 个答案: