Question

我正在制作一个文字游戏来帮助我学习德语。我有2个阵列，一个用于德语，另一个用于英语。然后我将所有单词显示在HTML页面上，作为带有“语言”和“位置”类的链接，这是一个中间有空格的数字。我想要的是当他们配对在一起时德语和英语单词fadeOut。这是我到目前为止的点击事件：

function setup()
{
    var check = { language: undefined, position: null };

    $("a").on("click", function()
    {
        var attributes = $(this).attr("class").split(" ");

        if (attributes[0] == "german") {
            if (check["language"] == "german") {
                alert("German word already clicked!");
                check["language"] = undefined;
                check["position"] = null;
                return;
            }

            if (check["language"] == "english") {
                if (check["position"] == attributes[1]) {
                    $(this).fadeOut(800);
                }
            }

            check["language"] = attributes[0];
            check["position"] = attributes[1];
        }

        if (attributes[0] == "english") {
            if (check["language"] == "english") {
                alert("English word already clicked!");
                check["language"] = undefined;
                check["position"] = null;
                return;
            }

            if (check["language"] == "german") {
                if (check["position"] == attributes[1]) {
                    $(this).fadeOut(800);
                }
            }

            check["language"] = attributes[0];
            check["position"] = attributes[1];
        }
    });
}

编辑：

function wordlist(obj)
{
    for (i = 0; i < obj["wordlist"].length; i ++) {
        $("#main .span12").append("<a href=\"#\" class=\"" + obj["language"] + " " + i + "\">" + obj["wordlist"][i] + "</a><br/>");
    }
}

完全披露：

我已经完成了自己的文字游戏，因此我决定通过提交我的最终版本来回馈社区，以便其他人可以使用。游戏还支持随机单词列表，然后将它们合并在一起。如果您认为可以改进代码，请发表评论。

$(document).ready(function()
{
    (function training()
    {
        Array.prototype.shuffle = function()
        {
            var i = this.length, j, temp;
            if (i == 0) return this;

            while (--i) {
                j = Math.floor(Math.random() * (i + 1));
                temp = this[i];
                this[i] = this[j];
                this[j] = temp;
            }
            return this;
        }

        var german =
        {
            language: "german",
            wordlist:
            [
                "der Zusammenhang",
                "der Wirt",
                "der Kaufmann",
                "das Gesetz",
                "(sich) klammern (an)",
                "der Lastwagen",
                "die Akte",
                "das Gericht",
                "zahlen",
                "zählen (bis, auf)"
            ]
        },
        english =
        {
            language: "english",
            wordlist:
            [
                "connection",
                "landlord",
                "dealer",
                "law",
                "to attach (to)",
                "truck",
                "file",
                "dish",
                "to pay",
                "to count (to, on)"
            ]
        };

        function generate(obj)
        {
            var array = [];

            for (i = 0; i < obj["wordlist"].length; i ++) {
                array.push("<a href=\"#\" class=\"" + obj["language"] + " " + i + "\">" + obj["wordlist"][i] + "</a><br/>");
            }
            return array;
        }

        var german = generate(german);
        var english = generate(english);

        var wordlist = german.concat(english);
        wordlist.shuffle();

        $("#main .span12").append(wordlist);

        (function setup()
        {
            var check = { language: undefined, position: null };

            $("a").on("click", function()
            {
                var attributes = $(this).attr("class").split(" ");

                if (attributes[0] == "german") {
                    if (check["language"] == "german") {
                        alert("    German word clicked!\nPlease click an English word.");
                        check["language"] = undefined;
                        check["position"] = null;
                        return;
                    }

                    if (check["language"] == "english") {
                        if (check["position"] == attributes[1]) {
                            $("." + attributes[1]).fadeOut(800);
                            $("." + attributes[1]).remove();
                        }
                    }

                    check["language"] = attributes[0];
                    check["position"] = attributes[1];
                }

                if (attributes[0] == "english") {
                    if (check["language"] == "english") {
                        alert("      English word clicked!\nPlease click a German word.");
                        check["language"] = undefined;
                        check["position"] = null;
                        return;
                    }

                    if (check["language"] == "german") {
                        if (check["position"] == attributes[1]) {
                            $("." + attributes[1]).fadeOut(800);
                            $("." + attributes[1]).remove();
                        }
                    }

                    check["language"] = attributes[0];
                    check["position"] = attributes[1];
                }
            });

            (function loop()
            {
                var timer = setTimeout(loop, 1000);
                var links = $("a");

                if (links.length == 0) {
                    clearTimeout(timer);
                    alert("Well done!");
                    return;
                }
            })();
        })();
    })();
});

Answer 1

我认为这应该有用。

function setup()
{
var check = { language: undefined, position: null };
$("a").on("click", function()
{
    var attributes = $(this).attr("class").split(" ");

    if (attributes[0] == "german") {
        if (check["language"] == "german") {
            alert("German word already clicked!");
            check["language"] = undefined;
            check["position"] = null;
            return;
        }

        if (check["language"] == "english") {
                $("a." + check["language"]).fadeOut(800);
                $("a").not("a." + check["language"]).fadeIn(800);
        }

        check["language"] = attributes[0];
        check["position"] = attributes[1];
    }

    if (attributes[0] == "english") {
        if (check["language"] == "english") {
            alert("English word already clicked!");
            check["language"] = undefined;
            check["position"] = null;
            return;
        }

        if (check["language"] == "german") {
                $("a." + check["language"]).fadeOut(800);
                $("a").not("a." + check["language"]).fadeIn(800);
        }

        check["language"] = attributes[0];
        check["position"] = attributes[1];
    }
});
}

Answer 2

Replce

$(this).fadeOut(800);

到

$("."+attributes[1]).fadeOut(800); 
OR
$("."+check["position"]).fadeOut(800);

jQuery fadeOut对链接

2 个答案: