我正在尝试从头开始创建jQuery幻灯片。我能够成功创建幻灯片的HTML结构（将幻灯片放在彼此的顶部）。
然后我成功编写了一些jQuery，只显示第一张幻灯片，只显示＆＃34; next＆＃34;按钮。
你可以在这里看到它正在发挥作用：http://jsfiddle.net/chLNj/
然后我尝试通过在单击下一个或上一个箭头时操纵div来添加功能。但是出于某种原因，我的代码打破了jQuery脚本，所有的div都显示出来了。
您可以在此处看到错误：http://jsfiddle.net/chLNj/2/
我不能为我的生活弄清楚我做错了什么（说实话，我是jQuery的新手）。如果有人能帮助我弄清楚我做错了什么，我们将不胜感激！
我的所有代码都在这个小提琴中：http://jsfiddle.net/chLNj/2/但是又来了：
CSS：
body {
background-color: #f6f6f6;
font-family: 'Abel', sans-serif;
font-size: 17px;
line-height: 23px;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 500px;
background-color: #ffffff;
margin: 20px auto;
padding: 15px;
}
.postContainer {
width: 100%;
margin-bottom: 20px;
}
.postContainer h1 {
font-family: 'Medula One', cursive;
font-weight: normal;
line-height: 46px;
font-size: 52px;
margin-bottom: 10px;
}
/************SLIDESHOW************/
.slideshow {
background-color: #DEDFCC;
width: 100%;
height: 320px;
position: relative;
}
.slideContainer {
padding: 10px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.slide {
width: 60%;
height: 300px;
float: left;
text-align: center;
background-color: #C9B7B7;
}
.slideMiddle {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.slide img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.slideInfo {
width: 40%;
height: 80%;
float: right;
padding: 10px;
}
.slideNav {
width: 100%;
padding: 10px;
background-color: #C9B7B7;
color: #DEDFCC;
}
.prevSlide {
width: 50%;
float: left;
}
.nextSlide {
width: 50%;
float: right;
text-align: right;
}
.slideCredit {
width: 40%;
font-style: italic;
font-size: 12px;
}
.fix {
clear: both;
}
HTML：
<div class="container">
<div class="postContainer">
<h1>Harry Styles</h1>
<p>Harry Styles is known as One Direction’s resident heartthrob. Check out this slideshow showcasing precisely why!</p>
<div class="slideshow">
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/tumblr_inline_n3zn2ypCPu1qbf6hn.gif">
</div>
<div class="slideInfo">
<p class="slideCaption">
He's just a cheeky fella, isn't he? </p>
<p class="slideCredit">
Tumblr </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/Harry-Styles.jpg">
</div>
<div class="slideInfo">
<p class="slideCaption">
Does this need an explanation? </p>
<p class="slideCredit">
ODC </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/article-2561301-1B94054200000578-549_634x642.jpg">
</div>
<div class="slideInfo">
<p class="slideCaption">
His glorious, glorious hair. </p>
<p class="slideCredit">
Google </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/article-2521940-19F5CE0900000578-42_634x738.jpg">
</div>
<div class="slideInfo">
<p class="slideCaption">
But he can also wear whatever the hell he wants and STILL look snazzy doing so. </p>
<p class="slideCredit">
Splash </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/Harry-Styles-in-Alexander-McQueen-BRIT-Awards-2014-600x902.jpg">
</div>
<div class="slideInfo">
<p class="slideCaption">
He can rock the latest fashions and look snazzy doing it! </p>
<p class="slideCredit">
Getty </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<!--end each-->
</div><!--slideshow end-->
<div class="slideNav">
<div class="prevSlide">
<i class="fa fa-chevron-left fa-2x"></i>
</div>
<div class="nextSlide">
<i class="fa fa-chevron-right fa-2x"></i>
</div>
<div class="fix"></div>
</div>
<!--end if-->
</div> <!--postContainer end-->
</div>
最后，jQuery：
$(document).ready(function() {
$(".slideshow").each(function() {
var slideshow = $(this);
var slides = $(slideshow).children().length;
var n = 1;
$(slideshow).children().hide();
if(n == 1){
$(".prevSlide").hide();
}
$(slideshow).children(':nth-child(' + n + ')').show();
$('.nextSlide').click(function (){
if(n == 1){
n++;
$(".prevSlide").show();
$(".nextSlide").show();
$(slideshow).children().hide();
$(slideshow).children(':nth-child(' + n + ')').show();
console.log(n);
}else if(n > 1) {
n++;
$(slideshow).children().hide();
$(slideshow).children(':nth-child(' + n + ')').show();
console.log(n);
if(n == slides){
$(".prevSlide").show();
$(".nextSlide").hide();
}
}
}
$('.prevSlide').click(function (){
if(n == slides) {
n--;
$(".prevSlide").show();
$(".nextSlide").show();
$(slideshow).children().hide();
$(slideshow).children(':nth-child(' + n + ')').show();
console.log(n);
}else if(n > 1) {
n--;
$(slideshow).children().hide();
$(slideshow).children(':nth-child(' + n + ')').show();
console.log(n);
if(n == 1){
$(".prevSlide").show();
$(".nextSlide").hide();
}
}
}
}); // each 1 end
}); // ready method end
答案 0 :(得分：0)
在);点击处理程序的最终}之后，您遗漏了.nextSlide。