如何在jQuery中單擊fadeOut，然後在最後顯示一條消息

我試圖製作一個遊戲，當您點擊相同顏色的框以便它們在點擊時消失並在結束顯示一條消息。我不能這樣做，我對jquery和javascript比較陌生。如果有人能找到解決方案，這將是一個很大的幫助。這裏是我的腳本：如何在jQuery中單擊fadeOut，然後在最後顯示一條消息

<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

你的意思是，當你點擊兩個相同顏色的盒子時，它們會消失嗎？ – 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中單擊fadeOut，然後在最後顯示一條消息

回答

相關問題