jquery点赞

最新推荐文章于 2022-12-21 09:37:51 发布

前端小菜菜

最新推荐文章于 2022-12-21 09:37:51 发布

阅读量261

点赞数 1

分类专栏： js 文章标签： jQuey点赞++

本文链接：https://blog.csdn.net/qq_43151592/article/details/103293202

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html代码
注：glyphicon-heart-empty为bootstrap里面组件样式；
需要引入bootstrap

<div class="descriptive pull-left">
	<p class="like"><i class="dZan">点赞321</i><span class="glyphicon glyphicon-heart-empty" id="gly"></span><a href="info.html">预定</a></p>
</div>

css样式

.descriptive .like {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  position: relative;
}
.descriptive .like i {
  font-style: normal;
  margin-right: 10px;
  color: #9D9D9D;
}
.descriptive .like span {
  font-size: 18px;
  color: #e86b8d;
}
.descriptive .like a {
  position: absolute;
  width: 80px;
  height: 24px;
  background: #e86b8d;
  line-height: 24px;
  text-align: center;
  margin-right: 80px;
  color: #fff;
  border-radius: 4px;
  left: 30%;
  top: 10px;
}

在js中

(function(){
	var dZan = $('.dZan').html();
	var num =dZan.substring(2);//获取html页面中的点击数量
	$('#gly').on('click',function(){
		$('#gly').toggleClass('glyphicon-heart-empty');//glyphicon-heart-empty为bootstrap里面组件样式
		$('#gly').toggleClass('glyphicon-heart').css({  //添加样式
			color:'#e86b8d',
		});
		var a = $('#gly').attr('class').split(' ');//将获得的字符串拆分成数组
		console.log(a);
		var b=a.filter(function(el){  //判断class里面有没有glyphicon-heart属性
			return el == 'glyphicon-heart';
		})
		if(b[0]){  //如果爱心已变红，点赞就加1
			num++;
			$('.dZan').html('点赞'+num);
		}else{
			num--;
			$('.dZan').html('点赞'+num);
		}
	});
})()