jquery + html 实现收藏加星功能

最新推荐文章于 2023-02-26 09:59:45 发布

赵小小酱

最新推荐文章于 2023-02-26 09:59:45 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js jquery 文章标签： js jquery html

本文链接：https://blog.youkuaiyun.com/qq_43625014/article/details/97497263

该博客介绍了如何利用jQuery和HTML实现收藏加星功能。在HTML文件中，当用户点击收藏按钮，jQuery代码会将一个表示星星的img标签添加到特定div中。在JS文件中，通过检查obj.specialCollection的值来判断item是否已被收藏，如果已收藏，则在页面加载时显示星星图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.html文件

<div data-role = "collapsible">
	<h3 class = "title">
		<div class = "specialCollectionValue" >' + obj.specialCollection + ' </div>
	</h3>
</div>

这里的obj.specialCollection ，作用是，如果在html中点击加入收藏，
那么在js中设置将

<img src = "css/images/StarPng.png" class = "StarPng">

这一个img标签(星星图片)加入到这个div标签里，js代码如下

.js文件

let specialCollection = document.getElementById("addPopup_specialCollectionInput").checked;
        if(specialCollection == true){
            //specialCollection = $.i18n.prop('specialCollection');
            specialCollection = '<img src = "css/images/StarPng.png" class = "StarPng">';
        } else {
            specialCollection = "";
        }

这一段是html中的添加收藏按钮，如果选中，那么在html中插入图片标签。显示星星符号。