1

私がやりたいのは、私が書いたカウント スクリプトの結果に基づいて div をフェードアウトさせることだけです。すべて正常に動作しますが、正常に動作しないのは、値がカウンターと呼ばれる div に返されるときに div がフェードアウトすることだけです。ここに jsfiddle があります - http://jsfiddle.net/andyjh07/fBqRK/で、javascript コードは以下のとおりです。

jquery -

$('#trigger').on('click', function(){

   // Count all of the checked boxes and then output the result
   var count = $("[type='checkbox']:checked").length;
   var fadespeed = 500;
   $('#counter').text(count).fadeIn(fadespeed);

   // Now, depending on the results, display some stuff
    var message = $('#message');
    if(count >= 8){
        message.fadeIn(fadespeed).text('You have done really well');
    } else if (count >= 4) {
        message.fadeIn(fadespeed).text('You are sort of okay');
    } else {
        message.fadeIn(fadespeed).text('You are terrible, sorry.')   
    }
});

if($('#counter').text() == 2){
    $('#buttons').fadeOut(500);
}

HTML -

<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>


<div id="trigger">Click to count 'em</div>
<div id="counter"></div>
<div id="message"></div>
<div id="buttons">Buttons</div>
4

3 に答える 3

1

現在、if statementページがロードされたとき、つまりJSファイルが開いて実行されたときに実行されます。if ブロックをクリック イベントに移動する必要があります。

 $('#trigger').on('click', function(){

      // Count all of the checked boxes and then output the result
      var count = $("[type='checkbox']:checked").length;
      var fadespeed = 500;
      $('#counter').text(count).fadeIn(fadespeed);

      // Now, depending on the results, display some stuff
       var message = $('#message');
       if(count >= 8){
         message.fadeIn(fadespeed).text('You have done really well');
     } else if (count >= 4) {
         message.fadeIn(fadespeed).text('You are sort of okay');
     } else {
         message.fadeIn(fadespeed).text('You are terrible, sorry.')   
     }

      if($('#counter').text() == 2){
          $('#buttons').fadeOut(500);
      }
 });
于 2013-03-20T16:15:32.303 に答える
0

ifステートメントをクリックハンドラー内に置き、のcount代わりに使用します$('#counter').text()。
jsFiddle

于 2013-03-20T16:14:40.187 に答える
0

ここ：

$('#trigger').on('click', function(){

   // Count all of the checked boxes and then output the result
   var count = $("[type='checkbox']:checked").length;
   var fadespeed = 500;
   $('#counter').text(count).fadeIn(fadespeed);

   // Now, depending on the results, display some stuff
    var message = $('#message');
    if(count >= 8){
        message.fadeIn(fadespeed).text('You have done really well');
    } else if (count >= 4) {
        message.fadeIn(fadespeed).text('You are sort of okay');
    } else {
        message.fadeIn(fadespeed).text('You are terrible, sorry.')   
    }

    if(count == 2){
        $('#buttons').fadeOut(500);
    }

});

フィドルで試してみました..魅力のように機能します..

于 2013-03-20T16:21:36.580 に答える