Jqueryでクリックすると要素を1つずつフェードアウトさせ、最後にメッセージを表示する方法

同じ色のボックスをクリックしてクリックするとフェードアウトするようにしてゲームを終了しようとしていますメッセージを表示します。私はそうすることができません、私は比較的jqueryとjavascriptに新しいです。誰かが解決策を見つけることができれば、大きな助けになるでしょう。ここは私のスクリプトです：ここではJqueryでクリックすると要素を1つずつフェードアウトさせ、最後にメッセージを表示する方法

<script> 
    $(document).ready(function() { 
     $(".boxr").click(function() { 
     var me = $(this); 
     $(".boxr").not(this).fadeTo('slow', 1, function() { 
     $(me).next().add(me).fadeOut('slow'); 
     }).unbind('click'); 
    $.when($('.boxr').fadeOut(500)).done(function() { 
     alert("You WIN!"); 
    }); 
     $(".boxy").click(function() { 
      $(this).fadeOut(); 
     }); 
     $(".boxb").click(function() { 
      $(this).fadeOut(); 
     }); 

    }); 
</script>

は、HTMLのボディです：

<body> 
<center> 
    <div> 
     <h1 style="font-size:72px;">Welcome!</h1> 
     <h1 id="op"></h1> 
<table><tr> 
<td><div class="boxr" ></div></td> 
<td><div class="boxy" ></div></td> 
<td><div class="boxb" ></div></td> 
<td><div class="boxy" ></div></td> 
</tr> 
</table> 
    </div> 
</center> 
</body>

boxr赤色の箱型とボックスはように黄色であるとされます。

出典

2017-01-17 Santosh Hegde

同じ色の2つのボックスをクリックすると、それらは消えますか？ – TheYaXxE

いいえ、たくさんのボックスがあるかもしれませんが、クリックしたときにだけ消える必要があります。 –

これほど簡単ではありませんか？

$(document).ready(function() { 
    "use strict"; 

    // Bind 
    $('#a').click(function() { 
     $('#a').fadeOut(500, function() { 

      // Remove 
      $('#a').remove(); 

      // Bind again 
      $('#b').click(function() { 
       $('#b').fadeOut(500, function() { 

        // Remove 
        $('#b').remove(); 

        // Bind again! 
        $('#c').click(function() { 
         $('#c').fadeOut(500, function() { 

          // Remove again! 
          $('#c').remove(); 

         }); 
        }); 

       }); 
      }); 
     }); 
    }); 
});

出典

2017-01-17 15:04:28 Crowes

'＃c'を削除した後、あなたは"勝ちました！ " –

いいえ、コードは機能しませんでした。ボックスは4だけではなく、もっと多くのボックスがあり、コードが収まりません。そして、私が書いたスクリプトは、一度に同じ色の箱をすべて取り除いてメッセージを表示するのに使っていました。私はそれがクリックされたときだけ消えたいと思うのに対して。 –

@SantoshHegdeあなたが本当に求めていることに自分の指を入れようとしていますが、これが間違っていればごめんなさい。あなたは一度他のものが消えるように他の人をクリック可能にしたいだけですか？もしそうなら、あなたは私のメソッドを使うことができ、フェードアウトのコールバック内のハンドルを束縛するだけです。 – Crowes

Jqueryでクリックすると要素を1つずつフェードアウトさせ、最後にメッセージを表示する方法

答えて

関連する問題