Question

大家好，我是编程新手，我最近才学习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)");
    })
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Tables</title>
</head>

<body>

    <div class="sidenav">
        <h5>Tabel #:</h5>
        <button type="button" class="btn btn-success btn-lg btn-block open">Open</button>
        <button type="button" class="btn btn-danger btn-lg btn-block full">Full</button>
        <button type="button" class="btn btn-warning btn-lg btn-block dirty">Dirty</button>
    </div>

    <div class="container">
        <div class="row">
            <div type="button"  class="button table" id= "1">
                <h4 class="tableNumber table1" >Table 1</h4>
            </div>
            <div type="button"  class="button table" id= "2">
                <h4 class="tableNumber">Table 2</h4>
            </div>
            <div type="button"  class="button table" id= "3">
                <h4 class="tableNumber">Table 3</h4>
            </div>
            <div type="button"  class="button table" id= "4">
                <h4 class="tableNumber">Table 4</h4>
            </div>
            <div type="button"  class="button table" id= "5">
                <h4 class="tableNumber">Table 5</h4>
            </div>
        </div>

      <div class="row">
        <div type="button"  class="button table" id= "6">
            <h4 class="tableNumber">Table 6</h4>
        </div>
        <div type="button"  class="button table" id= "7">
            <h4 class="tableNumber">Table 7</h4>
        </div>
        <div type="button"  class="button table" id= "8">
            <h4 class="tableNumber">Table 8</h4>
        </div>
        <div type="button"  class="button table" id= "9">
            <h4 class="tableNumber">Table 9</h4>
        </div>
        <div type="button"  class="button table" id= "10">
            <h4 class="tableNumber">Table 10</h4>
        </div>
      </div>
      
      <div class="row">
        <div type="button"  class="button table" id= "11">
            <h4 class="tableNumber">Table 11</h4>
        </div>
        <div type="button"  class="button table" id= "12">
            <h4 class="tableNumber">Table 12</h4>
        </div>
        <div type="button"  class="button table" id= "13">
            <h4 class="tableNumber">Table 13</h4>
        </div>
        <div type="button"  class="button table" id= "14">
            <h4 class="tableNumber">Table 14</h4>
        </div>
        <div type="button"  class="button table" id= "15">
            <h4 class="tableNumber">Table 15</h4>
        </div>
      </div>
    </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="restaurant.js"></script>
</body>
</html>

Answer 1

我将以另一种方式执行此操作，即附加和删除侦听器IMO可能会稍微考虑这个问题。

一种更好的方法是分别跟踪活动表，然后每当按下打开/完全/脏按钮之一时，便可以访问所选的表ID

var table_number = null;

// Changes table number
$(".button.table").click(function(){
    table_number = $(this).attr("id")
    // Also ensure you're more specific with selectors as you would have problems as soon as you add another h5 tag anywhere
    $(".sidenav h5").html("<h5>Table #: " + table_number + "</h5>");
})

// changes border color of tables
$(".open").click(function(){
    // 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)
    if (table_number == null) {
        alert("Select a table first");
        return false;
    }
    $("#" + table_number).css("border", "5px solid #28a745");
})

$(".full").click(function(){
    $("#" + table_number).css("border", "5px solid rgb(220, 53, 69)");
})

$(".dirty").click(function(){
    $("#" + table_number).css("border", "5px solid rgb(255, 193, 7)");
})

Answer 2

代码的问题是，当您选择一个表时，您在chosenButton变量中分配了当前表，并分配了三个事件，一个.open单击事件，.full单击事件和{{ 1}}点击事件

此事件与特定按钮绑定在一起，因此，一旦触发按钮.dirty，.open或.full中的任何一个点击事件，您就需要取消绑定其余的该按钮上的事件，或者单击其他按钮时，将触发先前的事件。

工作小提琴

.dirty

// 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(event){
        $(chosenButton).css("background", "green");
        $(".full").unbind('click');
        $(".dirty").unbind('click');
    })
    $(".full").click(function(event){
        $(chosenButton).css("background", "red");
        $(".open").unbind('click');
        $(".dirty").unbind('click');
    })
    $(".dirty").click(function(){
        $(chosenButton).css("background", "yellow");
        $(".full").unbind('click');
        $(".open").unbind('click');
    })
});

单击后如何使按钮停止收听

2 个答案: