Question

我确定这个问题会让你们其中一人3秒钟回答，但我很难过。单击“启用提示”后，文本将按预期更改为“禁用提示”，但在单击“禁用提示”后，文本不会再次重置为“启用提示”。我有什么想法吗？

  // function to toggle tips
    $(document).ready(function(){
    $(".help").hide();
    document.getElementById("help_trigger").innerHTML = "Enable Tips";
    $("a#help_trigger").click(function(){
    $(".help").toggle("400");
    document.getElementById("help_trigger").innerHTML = "Disable Tips";
    return false;
    });
    });

HTML

  <a id="help_trigger" href="">Enable Tips</a>             
      <div class="help" style="display: none">something</div>
           <div class="help" style="display: none">something else</div>

Answer 1

在您的点击处理程序中，您需要测试当前值并将其设置为相反的值。既然你已经使用了jQuery，那么你真的应该将它用于所有事情。

$(function(){ // short-hand is cleaner, IMO
    $(".help").hide();
    $("#help_trigger")
        .text( "Enable Tips" )
        .click(function(){
            var $this = $(this);
            $(".help").toggle("400");
            if ($this.text().match(/Disable/i)) {
                $this.text("Enable Tips");
            }
            else {
                $this.text("Disable Tips");
            }
           return false;
    });
});

Answer 2

只需将其放置到位而不是点击功能

$('a#help_trigger').click(function(){
   if ($(this).html().trim() == 'Disable Tips') {
      $(this).html('Enable Tips');
   } else { 
      $(this).html('Disable Tips');
   }
   return false; 
})

这将根据当前HTML的内容切换值。请记住，HTML必须准确！否则使用变量来检查状态和切换。

Answer 3

您可以尝试this或this

之类的内容

$("a#help_trigger").toggle(function (){

            $(this).text("Enable Tips");

        }, function(){

            $(this).text("disable Tips ");

        });

DEMO

替换隐藏/显示上的链接文本

3 个答案: