Any ideas why my jQuery won't execute? [closed]
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this questionI started building a testimonial rotator for a project. Oddly enough it broke before it made it live (tested it prior) and I decided to scrap it and write a new script to perform the same task. I'm relatively new to jQuery and I'm not the most familiar with using ternary operators but I wanted to give that a shot.
The code below is what I'm working with. It's my belief that this code should execute properly however if you were to copy the entirety of it into a new .html doc you'll see it doesn't.
I'm looking for any help I can get. I'm always trying to grow as a developer - I'm not one to just copy and paste blindly to get a result. I like to know what's going on :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Rotator Testing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
#testimonials{
width:300px;
height:100px;
background:#666;
position:absolute;
top:0;left:0;
}
.testimonial{
color:#CCC;
display:block;
width:200px;
height:30px;
background:#333;
position:absolute;
left:0;top:0;
z-index:5;
}
.show{
z-index:10;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.testimonial').css({opacity: 0.0});
$('.testimonial:first').css({opacity:1.0});
setInterval(function(){
var current = ( $('#testimonials .testimonial.show')? $('#testimonials .testimonial.show') : $('#testimonials .testimonial:first'));
var next = current.next().length ? $('#testimonials .testimonial:first') : current.next();
//Set the fade in effect for the next testimonial, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current testimonial
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
},2000);
});
</script>
</head>
<body>
<div id="testimonials">
<article class="testimonial">Testimonial 1</article>
<article class="testimonial">Testimonial 2</article>
<article class="testimonial">Testimonial 3</article>
<article class="testimonial">Testimonial 4</article>
</div>
</body>
</html>
var current = ( $('#testimonials .testimonial.show')? $('#testimonials .testimonial.show') : $('#testimonials .testimonial:first'));
jQuery will always return an object(even if the selector doesn't match any element), so your condition:
$('#testimonials .testimonial.show')
...will always be true.
Check the length instead:
var current = ( $('#testimonials .testimonial.show').length)
? $('#testimonials .testimonial.show')
: $('#testimonials .testimonial:first');
the next issue:
var next = current.next().length ? $('#testimonials .testimonial:first') : current.next();
I guess you need to switch this to:
var next = (!current.next().length)
? $('#testimonials .testimonial:first')
: current.next();
Currently you select the .next() if it is empty.
加载中,请稍侯......
精彩评论