任何想法为什么我的jQuery不会执行？

我开始为一个项目建立一个推荐旋转器。奇怪的是它在它实现之前就已经崩溃了（之前已经测试过），我决定取消它并编写一个新脚本来执行相同的任务。我相对较新的jQuery，我不是最熟悉使用三元运算符，但我想给一个镜头。任何想法为什么我的jQuery不会执行？

下面的代码是我正在使用的。我相信这段代码应该正确执行，但是如果你要将它的全部内容复制到一个新的.html文档中，你会发现它没有。

我正在寻找任何帮助，我可以得到。我一直试图成长为一名开发人员 - 我不是一个人只是为了得到结果而盲目复制和粘贴。我想知道这是怎么回事:)

<!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>

来源

2011-08-30 Tyler Willingham

“它应该正常工作，但它没有”是一个可怕的描述你的预期和实际行为如何不同。您会接受来自您的用户的那种错误报告吗？ –

http://jsfiddle.net/4adTQ/ – qwertymk

这里是一个微调http://jsfiddle.net/4adTQ/1/ – qwertymk

var current = ($('#testimonials .testimonial.show')? $('#testimonials .testimonial.show') : $('#testimonials .testimonial:first'));

jQuery将始终返回一个对象（即使选择不匹配任何元素），所以你的病情：

$('#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（）如果它是空的。

来源

2011-08-30 01:14:14

+1正确，为了得到它的工作，他还需要颠倒'var next'的三元表达式。 –

谢谢大家我真的很感谢这个帮助解决了我的问题，并且我知道下一次如何解决这个问题。 :) –

任何想法为什么我的jQuery不会执行？

回答

相关问题