更改文本

我寫了一個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>

但問題是單詞的變化（顯示信息，隱藏信息）當我點擊按鈕時顯示「顯示信息」，當再次點擊時顯示「隱藏信息」...其反向...可以找到我一個辦法？

來源

2014-10-16 Samy Sammour

你的代碼是正確的。只要改變從

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

你的代碼

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

來源

2014-10-16 13:14:22

它的工作對我來說......但你能告訴爲什麼會這樣？ – 2014-10-16 13:36:26

.text（）檢索包含換行符的文本。因此，在你以前的代碼中，它檢索「'新行'顯示信息'換行'」。然後點擊'if condition'爲false，所以它執行else條件。它將文本替換爲僅顯示信息而沒有新行。之後，你的代碼運行正確，但它與你相反。如果您只想使用以前的格式，您應該使用trim（）函數刪除換行符和不必要的空格，如'Roko C. Buljan' – 2014-10-17 07:19:31

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

來源

2014-10-16 12:59:13

回答

相關問題