使用jQuery切換錨標記的屬性值

Question

我有這個HTML。

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" data-mode="edit"> 
    <img src="images/icons/light/check.png" alt="" class="icon"> 
    <span>Enable Editing Mode</span> 
</a> 

上點擊我要繼續切換class屬性的值，並data-mode 它應該像這樣

if(mode == "edit") { 
    class = "button blueB"; 
    data-mode = "select"; 
} 
else if(mode == "select") { 
    class = "button redB"; 
    data-mode = "edit"; 
} 

我試圖用這個。

$('#estEditItemToggleMode').live('click', function(e){ 
    e.preventDefault(); 
    if($(this).data('mode') == "edit") { 
     $(this).removeClass('redB').addClass('blueB'); 
     $(this).attr('data-mode', 'select'); 
    } 
    else if($(this).data('mode') == "select") { 
     $(this).removeClass('blueB').addClass('redB'); 
     $(this).attr('data-mode', 'edit'); 
    } 
}); 

這隻能切換值一次。因此對兩次或多次點擊沒有影響。如何正確使用。

Answer 1

嘗試像下面，

DEMO

$('#estEditItemToggleMode') 
    .data('mode', 'edit') //added data to the link 
    .live('click', function(e){ 
     e.preventDefault(); 

     var $this = $(this); 
     var mode = $this.data('mode'); 

     if(mode == "edit") { 
      $this.removeClass('redB').addClass('blueB'); 
      $this.data('mode', 'select'); //Changed from .attr to .data 
     } 
     else if(mode == "select") { 
      $this.removeClass('blueB').addClass('redB'); 
      $this.data('mode', 'edit'); //Changed from .attr to .data 
     } 
}); 

，並從標記刪除ATTR data-mode。

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" > 
    <img src="images/icons/light/check.png" alt="" class="icon"> 
    <span>Enable Editing Mode</span> 
</a> 

編輯：緩存一些多餘的jQuery調用。

編輯2：.live已被棄用所以你應該或者使用.on或.delegate

編輯3：小提琴輸出，