jquery实现收藏图标切换
在前端开发中，经常需要使用到一些交互效果，比如收藏图标的切换。收藏图标是网站或应用中常见的一个功能，它能够让用户快速地收藏自己喜欢的内容，为用户提供更好的体验。下面我们就来介绍一下如何使用jquery实现收藏图标的切换。
一、创建HTML页面
首先，我们需要创建一个简单的HTML页面，用来显示收藏图标和模拟收藏功能。具体代码如下：
<!DOCTYPE html>
<
html>
<
head>
<
title>
jquery实现收藏图标切换<
/title>
<
meta charset="
utf-8"
>
<
script src="
https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"
>
<
/script>
<
/head>
<
body>
<
h1>
收藏图标切换<
/h1>
<
div id="
collection"
>
<
img src="
uncollect.png"
alt="
uncollected"
id="
uncollected"
width="
50"
height="
50"
>
<
img src="
collected.png"
alt="
collected"
id="
collected"
width="
50"
height="
50"
style="
display:none;
"
>
<
/div>
<
button id="
collect-btn"
>
收藏<
/button>
<
/body>
<
/html>
在这个HTML页面中，我们创建了一个div容器，包含了两个img标签，它们分别用于展示未收藏和已收藏的图标。为了实现图标的切换效果，我们在已收藏的图标中加入了style属性“display:none;
”，表示初始状态下该图标是隐藏的。同时，我们也在页面中创建了一个按钮，用来模拟收藏的功能。
二、实现图标切换
接下来，我们使用jquery来实现图标的切换效果。具体代码如下：
$(function() {// 收藏按钮的点击事件
$("
#collect-btn"
).click(function() {
// 获取已收藏和未收藏的图标
var uncollected = $("
#uncollected"
);
var collected = $("
#collected"
);
// 判断已收藏图标是否显示
if (collected.is("
:visible"
)) {
// 如果已收藏图标显示，则切换成未收藏图标
collected.hide();
uncollected.show();
} else {
// 如果未收藏图标显示，则切换成已收藏图标
uncollected.hide();
collected.show();
}
});
});
在这段代码中，我们首先使用jquery选择器获取了已收藏和未收藏的图标，然后通过判断已收藏图标是否显示来决定切换成哪个图标。如果已收藏图标显示，则隐藏已收藏图标，并显示未收藏图标；如果未收藏图标显示，则隐藏未收藏图标，并显示已收藏图标。
三、效果展示
最后，我们来看一下效果。在浏览器中打开这个HTML页面，点击收藏按钮，就可以看到图标的切换效果了。
1、引入jQuery
在页面头部引入jQuery库，如果不知道如何引入，可以在页面头部加入以下代码：
2、收藏图标的HTML代码
在需要实现收藏的位置添加HTML代码，例如：
3、CSS样式
收藏图标的样式可以使用CSS进行设置，例如：
.iconfont{
display: inline-block;
font-family: \"iconfont\" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before{
content: \"\\e6f3\";
}
4、jQuery实现
通过jQuery的操作，可以实现收藏图标的切换效果，例如：
$('.icon-shoucang').click(function(){
$(this).toggleClass('active');
});
5、点击事件
为了使用户可以点击收藏图标实现收藏或取消收藏的功能，可以添加以下代码：
$('.icon-shoucang').click(function(){
$(this).toggleClass('active');
if($(this).hasClass('active')){
alert('收藏成功');
}else{
alert('取消收藏');
}
});
6、完整代码
HTML代码：
CSS代码：
.iconfont{
display: inline-block;
font-family: \"iconfont\" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before{
content: \"\\e6f3\";
}
.icon-shoucang.active:before{
content: \"\\e600\";
color: red;
}
jQuery代码：
$('.icon-shoucang').click(function(){
$(this).toggleClass('active');
if($(this).hasClass('active')){
alert('收藏成功');
}else{
alert('取消收藏');
}
});
7、总结
通过以上步骤，我们可以实现收藏图标的切换效果，让用户更加方便地收藏自己喜欢的内容。通过使用jQuery库，我们不仅可以实现收藏图标的切换，还可以实现更多的交互效果，使网站变得更加生动有趣。
