私の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が実行されない理由は何ですか？

答えて

関連する問題