Jquery 具有 2 次点击功能

Question

我想 select 或删除select div 点击一下。

我想要这个：

单击 1 = 添加颜色和 select 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

Jquery 具有 2 次点击功能

Jquery with 2 clicks functions

javascript

jquery

click