使用jQuery單擊后更改按鈕文本

Question

我曾經嘗試在點擊后更改按鈕的文本，但它不能在一個片段中工作，而在另一個片段中也是如此。

有人可以幫助我理解我的代碼中缺少的內容嗎？

所以第一個工作，但在第二個代碼中，單擊按鈕時按鈕文本不會改變。 請幫我。 我已經附上了兩個代碼片段。

 $(document).ready(function () { $("#fold").click(function () { $("#fold_p").fadeOut(function () { $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn(); }) }) }); 

 .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button1 { background-color: white; color: black; border: 2px solid #4CAF50; } .button1:hover { background-color: #4CAF50; color: white; } 

 <div id="fold"> <button class="button button1"> <span id="fold_p">Hide</span> </button> </div> 

 $(document).ready(function () { $("#fold").click(function () { $("#fold_p").fadeOut(function () { $("#fold_p").text(($("#fold_p").text() == 'Hide ') ? 'Show' : 'Hide').fadeIn(); }) }) }); 

 .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '\\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } 

 <button class="button"> <div id="fold"> <span id="fold_p">Hide</span> </div> </button> 

謝謝。

Answer 1

如果您切換JavaScript控制台（使用F12），您將看到第二個小提琴中出現錯誤，即：

ReferenceError: $ is not defined

這意味着jQuery不會作為$ variable導入到第二個小提琴中

編輯2：為了進行匯總，我將click事件移動到按鈕，並通過刪除“隱藏”字符串中的尾隨空格來修復內聯。

編輯1：你的js代碼似乎也存在問題，這段代碼中的這個代碼正在修復它：

 $(document).ready(function () { $("button").click(function () { $("#fold_p").fadeOut(function () { $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn(); }) }) }); 

 .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '\\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button"> <div id="fold"> <span id="fold_p">Hide</span> </div> </button> 

Answer 2

您的java腳本中有錯誤：

 $("#fold_p").text(($("#fold_p").text() == 'Hide ') ? 'Show' : 'Hide').fadeIn();//note the space after 'Hide '

應該：

 $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn();//no space after 'Hide'

Answer 3

也許是這樣的：

 $(document).ready(function () { $("#fold").click(function () { $("#fold_p").fadeOut(function () { var btn_text= ''; if($("#fold_p").text() == 'Hide'){ btn_text = 'Show'; }else{ btn_text = 'Hide'; } $("#fold_p").text(btn_text).fadeIn(); }) }) }); 

 .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button1 { background-color: white; color: black; border: 2px solid #4CAF50; } .button1:hover { background-color: #4CAF50; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="fold"> <button class="button button1"> <span id="fold_p">Hide</span> </button> </div>