點擊按鈕更改按鈕上的ID值，點擊新的ID改回原來的ID與Jquery

Question

我想用一個按鈕作爲開關。如果我點擊按鈕value和id的變化。如果我再次點擊該按鈕，它會回到原來的value和id。

原始值可能看起來像這樣：

value="Show all" id="showall" 

更改爲此值

value="Standard" id="default" 

<script> 
    $(function() { 
     $("#showall").click(function() { 
      $("#showall") // change the Value text to Standard on the button 
      $("#showall") // Change ID value to default on the button 
     }); 
     $("#default").click(function() { 
      $("#default") // change value back to the original which is "Show all" 
      $("#default") // change ID back to original which is "Showall" 
     }); 
</script> 

Answer 1

假設這個按鈕是某種類型的<div class="container"></div>在這裏我們可以處理它的事件中（你可以從身體或文件處理它，但不建議這樣做）：

$(".container").on("click", "#showall, #default", function(){ 
    var props = this.id === "showall" 
     ? { value:'Standard', id:'default' } 
     : { value:'Show All', id:'showall' }; 
    $(this).attr(props); 
}); 

演示：http://jsbin.com/eravoq/2/edit

Answer 2

$("#showall").on('click', function() { 
     $(this).attr({ 'value': 'Standard', 'id': 'default' }); 
    }); 

    $("#default").on('click', function() { 
     $(this).attr({ 'value': 'Show all', 'id': 'showall' }); 
    }); 

Answer 3

爲什麼你會改變按鈕的ID？ 你可以做這樣的事情：

$(function() { 
     $("#switchButton").click(function(){ 
      if($(this).value == "default"){ 
       $(this).value = "Show all"; 
       // do other stuff 
      }else if($(this).value == "Show all"){ 
       $(this).value = "default"; 
       // do other stuff 
      } 
     }); 
    }); 

Answer 4

$("#showall").on('click', function() { 
    this.id = this.id=='showall' ? 'default' : 'showall'; 
    this.value = this.value=='Standard' ? 'Show All' : 'Standard'; 
}); 

FIDDLE

Answer 5

我知道是不是你問什麼，但如果我們走了一步回到你的問題，我想你真正想要的是來toggle兩個按鈕之間，所以我認爲是非常易於維護，可以理解，直觀和很多更多的事情，只是有兩個良好形成的按鈕，然後顯示/隱藏然後交替：

<style> 
    button#default{ 
    display: none; 
    } 
</style> 
​ 
<button id="showall" value="Show all">Show all</button> 
<button id="default" value="Standard">Standard</button> 

<script> 
    function toggleButtons(){ 
    $("button#showall, button#default").toggle(); 
    } 

    $("button#showall, button#default").click(toggleButtons); 
</script> 

Check the jsFiddle

Answer 6

您應該使用改變ID的一類，而不是切換。

http://jsfiddle.net/JzMnM/

if (that.hasClass('foo')) { 
    that.removeClass('foo').addClass('bar').val('bar'); 
} else { 
    that.removeClass('bar').addClass('foo').val('foo'); 
}