[英]Using font-awesome and css, is it possible for a css change to alter the icon?
假設我有以下CSS:
<style>
.liked {
color: #600;
}
.not-liked {
color: #aaa;
}
</style>
假設我有這個: <i class = 'fa fa-heart-o not-liked' id = "banner"></i>
在我的jQuery中,如果我將類從不not-liked
交換為liked
,我是否也可以在同一類中將fa-heart-o交換為fa-heart?
所以我試圖避免這種情況:
function() {
$("#banner").removeClass('not-liked');
$("#banner").removeClass('fa-heart-o');
$("#banner").addClass('liked');
$("#banner").addClass('fa-heart');
}
並基本上通過以下方式切換顏色和圖標:
function() {
$("#banner").removeClass('not-liked');
$("#banner").addClass('liked');
}
可以通過它們的Unicode標識符訪問FontAwesome字形。 實際上,樣式表提供的所有預定義類都使用::before
偽元素選擇器和content
以相同的方式創建。
我們可以看到fa-heart
是f004
,而fa-heart-o
是f08a
。
如果要減少HTML和JavaScript的類列表開銷,只需調整您自己的類即可准確地代表您的需求。
$('.toggle').on('click', function () { $(this).toggleClass('not-liked liked'); }); $('.once').on('click', function () { $(this).removeClass('not-liked').addClass('liked'); });
.liked::before { color: #600; content: '\\f004'; } .not-liked::before { color: #aaa; content: '\\f08a'; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <span class='toggle fa not-liked'></span> <span class='once fa not-liked'></span>
嘗試下面的代碼,您可以繼續使用jquery刪除和添加類
$( "i#banner" ).click(function() { $(this).toggleClass( "fa-heart-o not-liked fa-heart liked" ); });
.liked { color: #600; } .not-liked { color: #aaa; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <i class = 'fa fa-heart-o not-liked' id="banner"></i> <i class = 'fa fa-heart-o not-liked' id="banner"></i> <i class = 'fa fa-heart-o not-liked' id="banner"></i>
<i class = 'fa fa-heart-o not-liked' id = "#banner"></i>
在上面提到的代碼中,請確保
id = "banner" instead of id = "#banner"
然后,您可以繼續使用jquery刪除和添加類; 您的解決方案會很好用,或者我更喜歡@Russel提供的解決方案
我強烈建議您閱讀HTML,CSS和JavaScript的解耦-Philip Walton @ Google 。
IMO,您的代碼要緊密耦合。 不要將所有內容捆綁在一起,而應盡可能利用css:
$(document).ready(function(){ $(".js-update-heart").on("click", function(){ $(this).toggleClass('is-liked is-not-liked'); }); });
.banner .fa{ display: none; cursor: pointer; } .banner .fa-heart-o { color: #600; } .banner .fa-heart { color: #aaa; } .banner.is-liked .fa-heart{ display: inline; } .banner.is-not-liked .fa-heart-o{ display: inline; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="banner is-liked js-update-heart"> <i class="fa fa-heart-o"></i> <i class="fa fa-heart"></i> </span>
在此示例中,CSS讀起來很不錯,而jQuery非常小。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.