我正在搜索jQuery偵聽器以進行單擊並再次單擊

Question

這是我的運動

//======= 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值，只需添加和刪除類。

Answer 2

試試這個代碼：

$(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", color);
 if(!$(this).hasClass("bg-color"))     {
   $(this).css("background-color", color);
   $(this).addClass("bg-color");
 }else{
    $(this).css("background-color", "#FFFFFF");
    $(this).removeClass("bg-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");
 });
});