Javascript 知道为什么我的jQuery不会执行吗?
我开始为一个项目建立一个推荐旋转器。奇怪的是,它在进行现场测试之前就坏了,我决定放弃它,编写一个新脚本来执行同样的任务。我对jQuery比较陌生,对使用三元运算符不是最熟悉的,但我想尝试一下 下面的代码就是我正在使用的代码。我相信这段代码应该正确执行,但是如果你想把它全部复制到一个新的.html文档中,你会发现它没有正确执行 我正在寻求任何我能得到的帮助。作为一名开发人员,我一直在努力成长——我不是那种为了得到结果而盲目复制和粘贴的人。我想知道发生了什么:Javascript 知道为什么我的jQuery不会执行吗?,javascript,jquery,rotator,Javascript,Jquery,Rotator,我开始为一个项目建立一个推荐旋转器。奇怪的是,它在进行现场测试之前就坏了,我决定放弃它,编写一个新脚本来执行同样的任务。我对jQuery比较陌生,对使用三元运算符不是最熟悉的,但我想尝试一下 下面的代码就是我正在使用的代码。我相信这段代码应该正确执行,但是如果你想把它全部复制到一个新的.html文档中,你会发现它没有正确执行 我正在寻求任何我能得到的帮助。作为一名开发人员,我一直在努力成长——我不是那种为了得到结果而盲目复制和粘贴的人。我想知道发生了什么: <!DOCTYPE html P
<!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>
即使选择器与任何元素都不匹配,jQuery也将始终返回object,因此您的条件:
$('#testimonials .testimonial.show')
…永远都是真的
改为检查长度:
var current = ( $('#testimonials .testimonial.show').length)
? $('#testimonials .testimonial.show')
: $('#testimonials .testimonial:first');
下一期:
var next = current.next().length ? $('#testimonials .testimonial:first') : current.next();
我想您需要将此切换到:
var next = (!current.next().length)
? $('#testimonials .testimonial:first')
: current.next();
当前选择。如果为空,则选择“下一步”
即使选择器与任何元素都不匹配,jQuery也将始终返回object,因此您的条件:
$('#testimonials .testimonial.show')
…永远都是真的
改为检查长度:
var current = ( $('#testimonials .testimonial.show').length)
? $('#testimonials .testimonial.show')
: $('#testimonials .testimonial:first');
下一期:
var next = current.next().length ? $('#testimonials .testimonial:first') : current.next();
我想您需要将此切换到:
var next = (!current.next().length)
? $('#testimonials .testimonial:first')
: current.next();
当前,如果.next为空,则选择它。它应该可以正常工作,但它不能很好地描述您的期望以及实际行为的差异。你会接受来自你的用户的这种错误报告吗?这里有一个提示,下面的第一个答案修复了三元错误,我对此表示感谢。然而,似乎有一个问题决定了下一个是哪一个证明,因为同一个证明会一次又一次地淡入淡出。它应该能正常工作,但它并不是一个可怕的描述,它描述了你的期望和实际行为的不同。你会接受来自你的用户的这种错误报告吗?这里有一个提示,下面的第一个答案修复了三元错误,我对此表示感谢。然而,似乎有一个问题决定了下一个是哪一个推荐书,因为同一个推荐书会一次又一次地淡入淡出。+1正确,为了让它工作,他还需要反转var next的三元表达式谢谢你们,我真的很感谢你们的帮助,这看起来已经解决了我的问题,我知道下次如何解决这个问题+1正确,为了让它工作,他还需要反转var next的三元表达式谢谢各位,我真的很感谢你们的帮助,这看起来已经解决了我的问题,我知道下次如何解决这个问题