Question

我有两组两个按钮（状态）。如果单击“完成”或“保持”，则会更改按钮的背景颜色。我对所有按钮使用相同的类名，但每组按钮都有数据属性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

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

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

Answer 1

您可以使用event delegation仅使用单个侦听器，而不是将click事件绑定到具有类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); 
});

http://jsfiddle.net/1d40qhyx/2/

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

1 个答案: