1

尝试通过单击超链接来更改按钮的可见性以及超链接的文本。

我有按钮出现/消失，但我无法更改超链接的文本。

没有错误消息，但链接文本没有变化。

知道有什么问题吗？（或如何更好地诊断）。

<html>
<head>
<script src="jquery.js"></script>
<script>
  $(document).ready(function(){ 
    $('#button-selector').click (function(e) {
      e.preventDefault(); 
      $('#buttons').toggleClass('hidden'); 
      $('#button_toggle').toggle(function() { 
        $('a#button_selector').text('Show Buttons'); 
      }, function() {
        $('a#button_selector').text('Hide Buttons'); 
      });
    });
  });
</script>
<style>
  .small-text {font-size: x-small}
  .medium-text {font-size: small}
  .large-text {font-size: medium}
  #buttons.hidden {display: none}
  #buttons.shown {display: normal}
  #button_toggle {padding: 1em;}
</style>
</head>
<body>
  <div id="button_toggle"><a href="" id="button-selector">Hide buttons</a></div>
  <div id="buttons">
    <button id="small-text">Small</button>
    <button id="medium-text">Medium</button>
    <button id="large-text">Large</button>
  </div>
</body>
</head>
4

1 回答 1

4

您可以将新文本基于#buttons元素的可见性。

$('#button-selector').on("click", function(e) {
  e.preventDefault(); 
  $('#buttons').toggle(0,function(){
    $(e.target).text(function(){
      return $("#buttons").is(":visible") ? "Hide buttons" : "Show buttons" ;
    });
  });
});​

小提琴：http: //jsfiddle.net/wmn7C/

于 2012-05-27T22:18:00.787 回答