需要帮助为basic .fadeIn()/.fadeOut()滑块制作jQuery循环

Question

我是jQuery的新手，我很难找出正确的方法来为一个基本的轮播/横幅旋转器循环一组代码。我已经尝试了几个版本的" for“语句和.each()，但是我不能让它自己工作，所以我寻求帮助。

到目前为止，我的代码如下：

$('.next-1').click(function () {
    $('.featured-1').fadeOut(500,function(){
            $('.featured-2').fadeIn(500,function(){
        $('.featured-2').toggleClass("hide");
        });
    });
});
$('.next-2').click(function () {
    $('.featured-2').fadeOut(500,function(){
            $('.featured-3').fadeIn(500,function(){
        $('.featured-3').toggleClass("hide");
        });
    });
});

然后在滑块中返回一个类似的代码块：

$('.prev-2').click(function () {
    $('.featured-2').fadeOut(500,function(){
            $('.featured-1').fadeIn(500,function(){
        $('.featured-2').toggleClass("hide");
        });
    });
});
$('.prev-3').click(function () {
    $('.featured-3').fadeOut(500,function(){
            $('.featured-2').fadeIn(500,function(){
        $('.featured-3').toggleClass("hide");
        });
    });
});

这段代码现在可以工作了，我只是不想在我知道我可以循环它的时候输出这么多不必要的代码行。我希望能够循环到不再有“特色-n”div可供循环为止(能够循环到开头也很棒！)

下面是我用来生成每个“featured n”div块的PHP/HTML：

function home_slider_loop() {

$count = 0;
query_posts ('tag=slider');

if (have_posts()) : while (have_posts()) : the_post();
$count++;
?>

        <div class="featured-post featured-<?php echo $count; if ($count>1) { echo ' hide';}?>">
            <div class="featured-header">
                <a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>"><h1 class="featured-title"><?php the_title(); ?></h1></a>
                <p class="author">Written by Evan Luzi</p>
            </div>
            <div class="image-wrap">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('full', array('class' => 'slider-image')); ?></a>
            <div class="slider-nav">
                <div class="featured-prev prev-<?php echo $count; ?>"></div>
                <div class="featured-next next-<?php echo $count; ?>"></div>
            </div><!--End Navigation-->
            </div><!--End Image <?php echo $count; ?>-->
            <div class="featured-footer">
                <?php the_excerpt(); ?>
            <a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
            </div>
        </div><!--End Featured <?php echo $count; ?>-->

<?php 

endwhile;
endif;
}

下面是一个静态HTML输出的示例(想象一下，随着“featured n”类的递增，这个输出被迭代了几次：

<div class="featured-1">
            <div class="featured-header">
                <a href="http://www.tbabdev.com/?p=27" title="5 Useful Cinematography Apps for iOS You Should Download Today"><h1 class="featured-title">5 Useful Cinematography Apps for iOS You Should Download Today</h1></a>
                <p class="author">Written by Evan Luzi</p>
            </div>
            <div class="image-wrap">
            <a href="http://www.tbabdev.com/?p=27" title="5 Useful Cinematography Apps for iOS You Should Download Today"><img width="1018" height="416" src="http://www.tbabdev.com/wp-content/uploads/2013/07/cinematography-apps-8-hero.jpg" class="slider-image wp-post-image" alt="cinematography-apps-8-hero" /></a>
            <div class="slider-nav">
                <div class="featured-prev prev-1"></div>
                <div class="featured-next next-1"></div>
            </div><!--End Navigation-->
            </div><!--End Image 1-->
            <div class="featured-footer">
                <p>The devices we have in our pockets, the ones that can run these apps, these are the new leathermans. They have everything we need. They eliminate the need to carry paper manuals and enable us to do complex timelapse calculations in a fraction of the time as a paper and pen.</p>
            <a class="more-link" href="http://www.tbabdev.com/?p=27" alt="5 Useful Cinematography Apps for iOS You Should Download Today" >Read more</a>
            </div>
        </div><!--End Featured 1-->

您可以在http://www.tbabdev.com/上查看实际运行的代码

提前感谢您的帮助，并请善待n00b :)

Answer 1

使用类似如下的内容：

$('.nav .prev').click(function(){

    activeBlock = $('.featured.active');
    prevBlock = activeBlock.prev('.featured');

    activeBlock.fadeOut('slow',function(){
        prevBlock.fadeIn().addClass('active');
    }).removeClass('active');

});
$('.nav .next').click(function(){

    activeBlock = $('.featured.active');
    nextBlock = activeBlock.next('.featured');

    activeBlock.fadeOut('slow',function(){
        nextBlock.fadeIn().addClass('active');
    }).removeClass('active');

});

Html

<div class="nav">
   <div class="prev">&nbsp;</div>
   <div class="next">&nbsp;</div>
</div>

<div class="featured-post featured <?php if($count>1) echo 'hide' ?>">

    <div class="featured-header">
        <a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>"><h1 class="featured-title"><?php the_title(); ?></h1></a>
        <p class="author">Written by Evan Luzi</p>
    </div>

    <div class="image-wrap">
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('full', array('class' => 'slider-image')); ?></a>

    </div>
    <!--End Image <?php echo $count; ?>-->

    <div class="featured-footer">
        <?php the_excerpt(); ?>
        <a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
    </div>
 </div>

Answer 2

你可以这样做：

$('.featured-next, .featured-prev').click(function () {
    //find out if the clicked element is a prev or next element, extract the last part, will be useful later        
    var direction = $(this).hasClass("featured-next") ? "next" : "prev";

    //select the ".featured-n" block which is the super-parent of clicked element
    var $fullBlock = $(this).closest('div[class^="featured-"]'); //or add a class here to make your life easier

    //fade out full block
    $fullBlock.fadeOut(500, function () {
        //search for the next element and show it
        //note that $fullBlock.next() => $fullBlock["next"]() => $fullBlock[direction]() 
        $fullBlock[direction]().fadeIn(500, function () {
            //toggle the class "hide" of the element next to fullBlock
            $(this).toggleClass("hide");
        });
    });
});

说明：

你可以同时加入prev和next

• ，你必须检查它是一个next还是一个prev元素。将其设置为名为direction的变量。我们将使用它来确定当我们尝试fadeIn featured-n div时，我们必须使用prev()还是next()。

• 查找类设置为featured-n的父类(在你的例子中是超父类)。如果你给所有这些元素一个公共的类，这样我们就可以停止使用略微超出父级的超父选择器( 'div[class^="featured-"]' inefficient.

• Fade )，这可能会更好。

• 在回调中，根据direction变量，我们必须决定轮播是转到前一个块还是下一个块，如下所示：

if(direction === "prev") {$fullBlock.prev().fadeIn(//您的代码)} else {$fullBlock.next().fadeIn(//您的代码)}

您还必须知道，在这样的对象中：

var data = {"name“：" Blah "}

为了把“真主党”赶出来，我们可以说

data.name

或者我们可以说：

数据“名称”

所以基于这个，在我们的情况下，而不是

$fullBlock.prev()

或者我们可以说

$fullBlock"prev"

这就是direction变量包含的内容。最后，我们可以根据单击的内容选择下一个/prev元素:隐藏prev/next element.

• Add/remove“$fullBlockdirection

• Show”类。

希望这能有所帮助！