任何想法爲什麼我的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不會執行？

回答

相關問題