个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 21:16:15 25 4
gpt4 key购买 nike

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

// 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>

最佳答案

我会用不同的方式来做这件事，在我看来，附加和删除监听器可能有点过度思考这个问题。

更好的方法是单独跟踪事件表，然后每当按下打开/已满/脏按钮之一时，您就可以访问所选的任何表 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)");
})

关于javascript - 如何让按钮在被点击后停止监听，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60962848/

25 4 0
文章推荐： JavaScript 日期格式显示错误
文章推荐： javascript - 获取调用挂起并且没有响应任何内容
文章推荐： javascript - 在 firebase 文档中添加时间戳而不是自动生成的 key
文章推荐： javascript - 使用 console.log() 检测 HTML Canvas 中的形状、图像和鼠标溢出； (普通 JavaScript)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com