如何让按钮在被点击后停止监听

大家好,我是编程新手,最近刚刚学习了 javascript。我正在尝试制作这个餐厅系统,如果你点击一张桌子,你可以将它设置为干净、满或脏,它会改变桌子的边框颜色。当我单击一个表并更改其颜色时,它可以工作,但是当我单击另一个表并更改其颜色时,它也会更改我单击的上一个表。


// Changes table number

$(".button").click(function(){

    var chosenTable = $(this).attr("id")

    $("h5").html("<h5>Table #: " + chosenTable + "</h5>");

})


// changes border color of tables

$(".button").click(function(){

    var chosenButton = $(this)

    $(".open").click(function(){

        $(chosenButton).css("border", "5px solid #28a745");

    })

    setTimeout(function() {

        $(chosenButton);

    }, 100);

})


$(".button").click(function(){

    var chosenButton = $(this)

    $(".full").click(function(){

        $(chosenButton).css("border", "5px solid rgb(220, 53, 69)");

    })

})

$(".button").click(function(){

    var chosenButton = $(this)

    $(".dirty").click(function(){

        $(chosenButton).css("border", "5px solid rgb(255, 193, 7)");

    })

})


森栏
浏览 166回答 2
2回答

侃侃无极

我会以不同的方式做到这一点,附加和删除侦听器 IMO 可能有点过度思考这个问题。一种更理想的方法是单独跟踪活动表,然后每当按下打开/完整/脏按钮之一时,您就可以访问选择的任何表 idvar table_number = null;// Changes table number$(".button.table").click(function(){&nbsp; &nbsp; table_number = $(this).attr("id")&nbsp; &nbsp; // Also ensure you're more specific with selectors as you would have problems as soon as you add another h5 tag anywhere&nbsp; &nbsp; $(".sidenav h5").html("<h5>Table #: " + table_number + "</h5>");})// changes border color of tables$(".open").click(function(){&nbsp; &nbsp; // You can also add additional checks to ensure these buttons aren't clicked before a table is (otherwise you'll get a JS error in console)&nbsp; &nbsp; if (table_number == null) {&nbsp; &nbsp; &nbsp; &nbsp; alert("Select a table first");&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; $("#" + table_number).css("border", "5px solid #28a745");})$(".full").click(function(){&nbsp; &nbsp; $("#" + table_number).css("border", "5px solid rgb(220, 53, 69)");})$(".dirty").click(function(){&nbsp; &nbsp; $("#" + table_number).css("border", "5px solid rgb(255, 193, 7)");})

临摹微笑

您的代码的问题是,当您选择一个表时,您在chosenButton变量中分配当前表并分配三个事件.open单击事件、.full单击事件和.dirty单击事件.open此事件与特定按钮绑定,因此当任何一个按钮.full或.dirty单击事件被触发时,您需要解除与该按钮的其余事件的绑定,否则当您单击其他按钮时,将触发先前的事件.工作小提琴// Changes table number$(".button").click(function(){&nbsp; &nbsp; var chosenTable = $(this).attr("id")&nbsp; &nbsp; $("h5").html("<h5>Table #: " + chosenTable + "</h5>");})// changes border color of tables$(".button").click(function(){&nbsp; &nbsp; var chosenButton = $(this)&nbsp; &nbsp; $(".open").click(function(event){&nbsp; &nbsp; &nbsp; &nbsp; $(chosenButton).css("background", "green");&nbsp; &nbsp; &nbsp; &nbsp; $(".full").unbind('click');&nbsp; &nbsp; &nbsp; &nbsp; $(".dirty").unbind('click');&nbsp; &nbsp; })&nbsp; &nbsp; $(".full").click(function(event){&nbsp; &nbsp; &nbsp; &nbsp; $(chosenButton).css("background", "red");&nbsp; &nbsp; &nbsp; &nbsp; $(".open").unbind('click');&nbsp; &nbsp; &nbsp; &nbsp; $(".dirty").unbind('click');&nbsp; &nbsp; })&nbsp; &nbsp; $(".dirty").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(chosenButton).css("background", "yellow");&nbsp; &nbsp; &nbsp; &nbsp; $(".full").unbind('click');&nbsp; &nbsp; &nbsp; &nbsp; $(".open").unbind('click');&nbsp; &nbsp; })});<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">&nbsp; &nbsp; <!-- <link rel="stylesheet" href="styles.css"> -->&nbsp; &nbsp; <title>Tables</title></head><body>&nbsp; &nbsp; <div class="sidenav">&nbsp; &nbsp; &nbsp; &nbsp; <h5>Tabel #:</h5>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-success btn-lg btn-block open">Open</button>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-danger btn-lg btn-block full">Full</button>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-warning btn-lg btn-block dirty">Dirty</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber table1" >Table 1</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 2</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 3</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 4</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 5</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 6</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "7">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 7</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "8">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 8</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "9">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 9</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "10">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 10</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "11">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 11</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 12</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "13">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 13</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "14">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 14</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div type="button"&nbsp; class="button table" id= "15">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="tableNumber">Table 15</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></body></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript