javascript - 具有 2 次点击功能的 Jquery

Question

我想通过点击选择或取消选择一个 div。

我想要这个:

• 点击 1 = 添加颜色并选择 div
• 点击 2 = 如果 id 相同则变为粉红色，如果不同则变为白色。

我的问题是当我点击第一个 div(变成红色)，然后点击第二个 div(第一个变成白色，第二个也是)，然后第三个 div，第三个 div 变成粉红色，或者我想重新运行脚本(让第三个 div 像第一个 div 一样变红)。

我的代码:

$(document).ready(function () {
    $i = 1;
    $firstcase = "";

    $(".blackcase").click(function firstclick(event) {

        if ($i == 1) 
        {
            $("#" + event.target.id).css("background-color", "red");
            $firstvalue = $("\#" + event.target.id).html();
            $firstcase = "\#" + event.target.id + "";
            $i++;
        }         
        else 
        {
            return false;
        }

        $(".blackcase").one("click", function (event) {

            $firstcase2 = "\#" + event.target.id + "";

            if ($("#" + event.target.id).is($firstcase)) 
            {
                $("#" + event.target.id).css("background-color", "pink");
                $i = 0;
                $firstcase = "";
                return;
            }             
            else 
            {
                $(".blackcase").css("background-color", "white");
                $i = 1;
                $firstcase = "";
                return false;
            }
        });
        return false;
    });
}); 

JSFIDDLE:https://jsfiddle.net/12gwq95u/3/

Answer 1

如果您只有一个事件处理程序并将最后点击的 ID 存储在点击处理程序之外的变量中，则可以大大简化您的逻辑。试试这个:

var lastClicked = '';
$(".blackcase").click(function(e) {
    e.preventDefault();
    $('.blackcase').removeClass('red pink');
    $(this).addClass(lastClicked != this.id ? 'red' : 'pink');
    lastClicked = this.id;
});

Example fiddle