Javascript 两组按钮，但具有相同的类名

我有两组两个按钮（状态）。如果单击“完成”或“保持”，它将更改按钮的背景色。我对所有按钮使用相同的类名，但每组按钮都有数据属性

data section='Park One'

和

data section='Park Two'

见工作示例：

我正在使用

$。each（）

函数检测该部分，删除所有背景并在所选按钮上添加背景色。代码是否编码良好，或者有哪些地方可以改进

Jquery：

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

    var buttonValue = $(this).val();
    var section = $(this).data("section");

    var cssClass = (buttonValue === "complete") ? 'green' : 'orange';

    $('.updateStatus').each(function () {
        if ($(this).data("section") == section) {

            $(this).removeClass("green orange");

            if ($(this).val() == buttonValue) {
                $(this).addClass(cssClass);
            }
        }
    })

});

HTML

1号停车场
完成
暂停
停车位2
完成
暂停

您可以使用

事件委派

仅使用一个侦听器，而不是使用类

updateStatus将单击事件绑定到每个元素上

这应该更有效：

<div id="wrapper">
    <div class="section">
        <h2>Park One</h2>

        <button class="updateStatus" value="complete" data-section='Park One'>Complete</button>
        <button class="updateStatus" value="on hold" data-section='Park One'>On Hold</button>
    </div>
    <div class="section">    
        <h2>Park Two</h2>

        <button class="updateStatus" value="complete" data-section='Park Two'>Complete</button>
        <button class="updateStatus" value="on hold" data-section='Park Two'>On Hold</button>
    </div>
</div>

$("#wrapper").on("click", ".updateStatus", function(){ 
    var $siblings = $(this).siblings(); 
    var cssClass = ($(this).val() === "complete") ? 'green' : 'orange'; 
    $siblings.removeClass("green orange"); 
    $(this).addClass(cssClass); 
}); 


公园一号
完成
暂停
停车位2
完成
暂停
$（“#包装器”）。在（“单击”，“.updateStatus”，function（）{
var$sides=$（this.sides（）；
var cssClass=（$（this.val（）==“complete”）？“绿色”：“橙色”；
$sides.removeClass（“绿橙色”）；
$（此）.addClass（cssClass）；
}); 

试试这个。如果你的
部分
不能组合在一起，你可以使用你的代码，但是如果可以组合，为什么不设置
div
容器按同一部分对它们进行分组？@SkyFang我希望我已经想到了，我的错。它选择当前所选元素的
同级
元素。即，相对于父元素处于同一级别的元素。
<div id="wrapper">
    <div class="section">
        <h2>Park One</h2>

        <button class="updateStatus" value="complete" data-section='Park One'>Complete</button>
        <button class="updateStatus" value="on hold" data-section='Park One'>On Hold</button>
    </div>
    <div class="section">    
        <h2>Park Two</h2>

        <button class="updateStatus" value="complete" data-section='Park Two'>Complete</button>
        <button class="updateStatus" value="on hold" data-section='Park Two'>On Hold</button>
    </div>
</div>

$("#wrapper").on("click", ".updateStatus", function(){ 
    var $siblings = $(this).siblings(); 
    var cssClass = ($(this).val() === "complete") ? 'green' : 'orange'; 
    $siblings.removeClass("green orange"); 
    $(this).addClass(cssClass); 
});