javascript - 我正在搜索 jQuery 监听器来处理单击和再次单击

Question

Here是我的锻炼

//======= CUSTOM JS =======//

$(document).ready(function run() {
    //WHEN SUBMIT BUTTON CLICKS
    $("button").click(function(evt) {
        evt.preventDefault();
        //REMOVE ALL TR'S
        $("tr").remove();
        $("p").remove();
        //IMPORTAND VARIABLES
        const table = $(".table");
        const height = $("#height").val();
        const width = $("#width").val();
        //NESTED LOOPS ONE FOR TR'S AND ONE FOR TD'S()
        for(var row = 1; row <= height; row++) {
            table.append("<tr></tr>");
            for(var col = 1; col <= width; col++) {
                table.children().last().append("<td></td");
            }
        }
        //ADD CLASSES FOR BOUNCE EFFECTS ALSO ADD INFORMATION <P>
        $("#fade").toggleClass("animated bounceInUp");
        $("table").before("<p><i class='fa fa-info-circle'; aria-hidden='true'></i>&nbspLeft click to color block and right to Undo</p>");
    });

    //EVENT DELIGATION LISTENER ON TABLE
    $(".table").on("click", "td", function() {
        //STORE THE COLOR FROM INPUT IN A VARIABLE AND CHANGE THE TD BACKGROUND
        const color = $("input[type=color]").val();
        $(this).css("background", color);
    });
    //EVENT DELIGATION LISTENER ON TABLE WITH RIGHT CLICK ADD WHITE ON TD'S
    $(".table").on("contextmenu", "td", function(evt) {
        evt.preventDefault();
        $(this).css("background", "#ffffff");
    });
});

提交高度和宽度后会生成表格然后您选择一种颜色，当您单击 td 时，就会采用颜色背景。通过“右键”单击，我将其更改为白色...

我正在搜索 jQuery 监听器，以使用相同的左键单击来添加或删除颜色。

无法使用 .toggle()，因为 td 是在将监听器设置为表后生成的。

Answer 1

我认为这真的很简单。只需添加 var status，请参阅演示:https://jsfiddle.net/neqf1q99/1

var status = false;
$(elem).click(function(){
    if(!status){
        status = true;
        change_to_red();
    }else{
        status = false
        change_to_white();
    }
})

我的建议是不要覆盖默认的 CSS 值，只需添加和删除类。