我是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输出的示例（想象一下这个迭代次数增加了“features-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-->
提前感谢您的帮助，请善待n00b：）
答案 0 :(得分：0)
使用类似的东西：
$('.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"> </div>
<div class="next"> </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>
答案 1 :(得分：0)
你可以这样做：
$('.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的变量。我们将使用此功能来了解在我们尝试prev() next() div时是否必须使用fadeIn或featured-n。featured-n的父级（在您的情况下是超级父级）。 如果您为所有这些元素提供一个公共类可能会更好，这样我们就可以停止使用'div[class^="featured-"]'选择器，效率稍低。 在回调中，基于direction变量，我们必须决定轮播是否会转到prev block或next block，如下所示：
if(direction === "prev")
{
$fullBlock.prev().fadeIn(//your code)
}
else
{
$fullBlock.next().fadeIn(//your code)
}
你还必须知道，在这样的对象中：
var data = {"name" : "Blah Blah"}
获得＆＃34; Blah Blah＆＃34;我们可以说
data.name
或者我们可以说：
data["name"]
基于此，在我们的情况下，而不是
$fullBlock.prev()
或者我们可以说
$fullBlock["prev"]()
direction变量包含的内容。最后，我们可以根据点击的内容选择下一个/ prev元素：
$ fullBlockdirection
显示上一个/下一个元素。
添加/删除＆＃34;隐藏＆＃34;类。
希望这有帮助！