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 に答える