我想創(chuàng)建一個(gè)按鈕，在單擊時(shí)更改其內(nèi)容，但當(dāng)我再次單擊時(shí)，內(nèi)容必須返回到其初始外觀。我已經(jīng)成功創(chuàng)建了一個(gè) jQuery 代碼，它更改了內(nèi)容，但需要第二次單擊部分的幫助。我的目標(biāo)是這個(gè)按鈕有兩個(gè)條件，并根據(jù)單擊時(shí)的活動(dòng)條件切換到第二個(gè)條件。$("#changeArrow").click(function(){ var textShowing = true; if (textShowing == true){ $("#changeArrow").html(function(){ return "This is some text! ⊗"; textShowing = false; }); } else { $("#changeArrow").html(function(){ return "This is some text! ⊕"; textShowing = true; }); }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="changeArrow">This is some text! ⊕</button>
2 回答
qq_笑_17
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊
一種方法是提供一個(gè)函數(shù)來html()檢查當(dāng)前內(nèi)容是什么并基于該內(nèi)容返回新內(nèi)容，如下所示：
$("#changeArrow").click(function() {
$(this).html((i, h) => h == 'This is some text! ⊕' ? 'This is some text! ×' : 'This is some text! ⊕');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="changeArrow">This is some text! ⊕</button>
然而，由于您所做的只是更改圖標(biāo)，因此如果您使用 CSS 添加圖標(biāo)，這可能會(huì)變得更加簡(jiǎn)單。然后你可以在每次點(diǎn)擊時(shí)簡(jiǎn)單地切換一個(gè)類：
$("#changeArrow").click(function() {
$(this).toggleClass('close');
});
#changeArrow:after {
content: '⊕';
margin: 0 -1px 0 4px;
display: inline-block;
}
#changeArrow.close:after {
content: '×';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="changeArrow">This is some text!</button>
滄海一幻覺
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊
您應(yīng)該在單擊事件處理函數(shù)之外聲明標(biāo)志變量 ( textShowing )。此外，您可以使用this關(guān)鍵字來引用單擊的元素：
var textShowing = true;
$("#changeArrow").click(function(){
if (textShowing == true){
$(this).html("This is some text! ⊗");
textShowing = false;
} else {
$(this).html("This is some text! ⊕");
textShowing = true;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="changeArrow">This is some text! ⊕</button>
- 2 回答
- 0 關(guān)注
- 162 瀏覽
添加回答
舉報(bào)
0/150
提交
取消