[英]Change Font Awesome Icon Only
我試圖在單擊時將圖標從 V 形向下更改為 V 形向上。 當前,單擊時會顯示“類別”和“隱藏”。 我想讓它一直說“類別”。 那可能嗎?
這是代碼:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
<i class="fa fa-chevron-down"></i> Categories
</h1>
<div id="showhide" style="display:none;">
<ul>
<li><a href="#">Hello World</a>
</li>
</ul>
</div>
JS
function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if ($(h1).text().trim() == 'Categories') {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Hide ');
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
x.fadeOut();
}
}
代碼筆: https ://codepen.io/chadwicked123/pen/porRoOq
如果在所有條件下都相同,則您的“如果條件”是無法檢測到的。 因此,最好將您的條件更改為更具體的內容,例如標簽的類。 像這樣 :
function arata_ascunde(h1) {
var x = $('#showhide');
if ($(h1).find('i').hasClass('fa-chevron-down')) {
$(h1).find('i').remove();
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Categories');
x.fadeIn();
} else {
$(h1).find('i').remove();
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories');
x.fadeOut();
}
}
我改變了一些東西,讓你的結果更漂亮。 這段代碼仍然可以改進(我不是前端開發人員)。
我使用基本的 javascript 和一些邏輯來根據類更改 HTML
這是它的代碼筆 -鏈接
這是編輯后的 JS 文件:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
Categories<i class="fa fa-chevron-down"></i>
</h1>
<div id="showhide" style="display:none;">
<ul>
<li><a href="#">Hello World</a>
</li>
</ul>
</div>
和編輯過的 JS 文件
function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if (document.querySelector("h1").classList.contains("down")) {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Categories ');
document.querySelector("h1").classList.remove("down")
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
document.querySelector("h1").classList.add("down")
x.fadeOut();
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.