兩組按鈕，但類名相同

Question

我有兩組兩個按鈕（狀態）。如果您點擊完成或保持，它將更改按鈕的背景顏色。我使用相同的類名的所有按鈕，但每個按鍵組有數據屬性data-section='Park One'和data-section='Park Two'

見工作示例：http://jsfiddle.net/1d40qhyx/

我使用$.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只使用一個單一的監聽器，而不是點擊事件與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/