我可以切换文本消失,但无法获取要显示的超链接文本

时间:2012-05-27 22:13:23

标签: javascript jquery html

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

我有按钮显示/消失,但我无法更改超链接的文本。

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

知道出了什么问题吗? (或如何更好地诊断)。

<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>

1 个答案:

答案 0 :(得分: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/