使用jQuery切換按鈕的標籤

我想在每次點擊時使用jQuery切換按鈕的標籤。使用jQuery切換按鈕的標籤

以下是我已經實現了代碼：

<html> 
<head> 
    <script src="jquery-1.8.2.js"></script> 
    <script> 
     $(document).ready(function(){ 

      $("#details_button").click(function() { 
       var button_text = $("#details_button").attr("text"); 
       button_text == "Hide" ? $("#details_button").text("Details") : $("#details_button").text("Hide"); 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <button id="details_button" type="button">Details</button> 
</body> 
</html>

我希望在「details_button」每被點擊一次更改標籤，從「詳細」到「隱藏」反之亦然。

但它只會改變一次，從「詳細」到「隱藏」，然後它不會對以後點擊更改。

我在這裏錯過了什麼？

來源

2012-10-08 Myxtic

變化$("#details_button").attr("text");到$("#details_button").text();

來源

2012-10-08 02:08:15

試試這個：使用http://jsfiddle.net/rsnSx/或http://jsfiddle.net/z7mrs/或http://jsfiddle.net/dNzrq/

API：

.html() - http://api.jquery.com/html/

.on - http://api.jquery.com/on/

希望它適合事業:)

代碼

$(document).on('click','#details_button',function() { 

     var button_text = $(this).html(); 
     button_text == "Hide" ? $(this).text("Details") : $(this).text("Hide");; 
    });

來源

2012-10-08 02:01:13

+1感謝您的所有細節。這也適用！ – Myxtic

@Myxtic沒有probs人！很高興它幫助'：）' –

這應該工作

$("#details_button").html() == "Hide" ? $("#details_button").html("Details") : $("#details_button").html("Hide");;

來源

2012-10-08 02:01:31 Tariqulazam

+1謝謝，這也有效！ – Myxtic

這個工作對我來說：

$(document).ready(function() { 
    $("#details_button").click(function(e) { 
     var self = $(this); //cache object 
     self.text(function() { 
      var text = self.text(); 
      return text === 'Hide' ? 'Details' : 'Hide'; 
     }); 
     e.preventDefault(); 
     return false; 
    }); 
});

工作小提琴：http://jsfiddle.net/TDr3Q/

這也可以簡化爲：

$(document).ready(function() { 
    $("#details_button").click(function(e) { 
     $(this).text(function() { 
      return $(this).text() === 'Hide' ? 'Details' : 'Hide'; 
     }); 
     e.preventDefault(); 
     return false; 
    }); 
});

工作小提琴：http://jsfiddle.net/TDr3Q/1/

來源

2012-10-08 02:06:44 pete

+1謝謝，這也有效！ – Myxtic

只需更改以下行：

var button_text = $("#details_button").attr("text");

到：

var button_text = $("#details_button").html();

來源

2012-10-08 02:08:38 janenz00

+1謝謝，這個作品也是！ – Myxtic

使用jQuery切換按鈕的標籤

回答

相關問題