大家好，我是编程新手，最近刚刚学习了 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)"); })})
2 回答
侃侃无极
TA贡献2051条经验 获得超10个赞
我会以不同的方式做到这一点，附加和删除侦听器 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)");
})
临摹微笑
TA贡献1982条经验 获得超2个赞
您的代码的问题是，当您选择一个表时，您在chosenButton变量中分配当前表并分配三个事件.open单击事件、.full单击事件和.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');
})
});
<!DOCTYPE html>
<html>
<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>
</body>
</html>
添加回答
举报
0/150
提交
取消