Javascript 如何使元素在Jquery中单击后逐个淡出，并在最后显示一条消息_Javascript_Jquery_Html

Javascript 如何使元素在Jquery中单击后逐个淡出，并在最后显示一条消息

javascript jquery html

Javascript 如何使元素在Jquery中单击后逐个淡出，并在最后显示一条消息,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试制作一个游戏，当你点击具有相同颜色的框时游戏结束，这样它们就会在点击后消失，并在最后显示一条消息。我不能这样做，我对jquery和javascript比较陌生。如果有人能找到解决办法，那将是一个很大的帮助。这是我的剧本： <script> $(document).ready(function () { $(".boxr").click(function() { var me = $(this); $(".boxr

我正在尝试制作一个游戏，当你点击具有相同颜色的框时游戏结束，这样它们就会在点击后消失，并在最后显示一条消息。我不能这样做，我对jquery和javascript比较陌生。如果有人能找到解决办法，那将是一个很大的帮助。这是我的剧本：

<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>


$（文档）.ready（函数（）{
$（“.boxr”）。单击（函数（）{
var me=$（此）；
$（“.boxr”）.not（this）.fadeTo（'slow'，1，function（）{
$（me）.next（）.add（me）.fadeOut（'slow'）；
}).unbind（'click'）；
$.when（$（'.boxr'）.fadeOut（500））.done（函数（）{
警惕（“你赢了！”）；
});
$（“.boxy”）。单击（函数（）{
$（this.fadeOut（）；
});
$（“.boxb”）。单击（函数（）{
$（this.fadeOut（）；
});
});

以下是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是一个红色的盒子，boxy是黄色的等等。

不是这么简单吗

$(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();

                        });
                    });

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

不是这么简单吗

$(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();

                        });
                    });

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

你的意思是，当你点击两个相同颜色的框时，它们会消失吗？不，可能有很多框，但只有在点击时它们才会消失。你的意思是，当你点击两个相同颜色的框时，它们会消失吗？不，可以有很多框，但只有在点击时它们才会消失。在删除

\c

后，你可以发出警告。不，代码不起作用，框不只是4个，还有更多的框，只是代码不适合。我给的脚本用于一次删除所有相同颜色的框并显示消息。而我只希望它在单击时褪色。@Santoshegde试图指出你真正想问的问题，如果没有，对不起他的是错误的。您只希望在其他控件淡出后，其他控件才可以单击？如果是，您可以使用我的方法，并且只绑定淡出回调中的句柄，您希望它们在淡出后可以单击。@Crowes否否。我要的是淡出我单击的控件。一旦相同的颜色div淡出，就会显示一条警告消息g你赢了。我的代码一次删除所有div。删除

\c

后，你可以提醒

“你赢了！！”

。不，代码不起作用，框不只是4个，还有更多的框，只是代码不适合。我给的脚本用于一次删除所有相同颜色的框并显示消息。而我只希望它在单击时褪色。@Santoshegde试图指出你真正想问的问题，如果没有，对不起他的是错误的。您只希望在其他控件淡出后，其他控件才可以单击？如果是，您可以使用我的方法，并且只绑定淡出回调中的句柄，您希望它们在淡出后可以单击。@Crowes否否。我要的是淡出我单击的控件。一旦相同的颜色div淡出，就会显示一条警告消息你赢了。我的代码一次删除所有div。