Question

我写了一个javascript代码，点击链接切换div：

<a id="show" href="#" class="lnk_log">
   Show Information
</a>
<div id="info_div" style="display:none;">
   sssss 
</div>

和jquery代码是：

<script type="text/javascript">
 $(document).ready(function () {
    $("#show").click(function () {
        if ($("#show").text() == "Show Information") {
            $("#show").text("Hide Information");
            $("#info_div").toggle("slow");
        } else {
            $("#show").text("Show Information");
            $("#info_div").toggle("slow");
        }
    });
});
</script>

但问题是更改单词（显示信息，隐藏信息）当我点击按钮显示＆＃34;显示信息＆＃34;再次点击它会显示＆＃34;隐藏信息＆＃34; ......反过来......请找我解决方案吗？

Answer 1

http://api.jquery.com/jquery.trim/

<强> jsBin demo

您的主要问题是您的DIV文字有空格（ 换行符 ），因此将永远不会与您的查询匹配，因此会触发else

您必须先修剪来自空格的文字：

  var $show = $("#show"); // Also, cache the selectors you plan to reuse

  $show.click(function () {
    var showText = $.trim( $show.text() );
    if (showText === "Show Information") {
      $show.text("Hide Information");
    }
    else {
      $show.text("Show Information");
    }
    $("#info_div").toggle("slow");
  });

此外，由于您使用anchor，因此最好使用event.preventDefault()来阻止浏览器跳到顶部。如果它在默认情况下始终隐藏，您还可以重写代码，如：

<强> jsBin demo 2

$("#show").click(function(evt) {
    evt.preventDefault(); // prevent browser default anchor behavior
    $(this).text( ((this.tog^=1)?"Hide":"Show") +" Information" );
    $("#info_div").toggle("slow");
});

https://developer.mozilla.org/en/docs/Web/API/event.preventDefault

Answer 2

您的代码是正确的。只需从

更改您的代码即可

<a id="show" href="#" class="lnk_log"> Show Information </a>

要

<a id="show" href="#" class="lnk_log">Show Information</a>

在toggle asp.net上更改jquery中的文本

2 个答案: