我需要在点击时增加 fa-heart 值的计数并在第二次点击时减少。
问题是我在同一页面中有多个 fa-heart,因此无法在单击的 fa-heart 上递增/递减。
下面是我的 fiddle
https://jsfiddle.net/mehbub/d9e2qotg/1/
(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
$(document).on('click', ".notliked", function() {
var $this = $(this);
$this.removeClass('notliked');
$this.addClass('liked')
$count = $('.likes-count');
$count.text(function(idx, txt) {
return (+txt == 0) ? 0 : (+txt - 1);
heart.classList.toggle('grey');
});
});
$(document).on('click', ".liked", function() {
var $this = $(this);
$this.removeClass('liked');
$this.addClass('notliked');
$count = $('.likes-count');
$count.text(function(idx, txt) {
return +txt + 1;
heart.classList.toggle('red');
});
});
$count.text(function(idx, txt) {
// convert text to number and increment by one
return +txt + 1;
});
#heart {
color: grey;
font-size: 20px;
}
#heart.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
robert stephen</p><i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 100 </span><br>
<p>
James Camroon</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 101 </span><br>
<p>
John Wick</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 37 </span><br>
<p>
James Bond</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 22 </span><br>
<p>
Avengers</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 90 </span>
我需要为每个 fa-heart 单独单击增量/减量,如果增量则颜色变为红色,如果减量则变为灰色
谢谢
最佳答案
你应该删除重复的 id heart
或者只是删除它,因为你已经有一个类 heart
然后将点击附加到这个公共(public)类并切换类 喜欢/不喜欢
,您可以将这些类用作 CSS 中的规则,因此不需要 red/grey
类,例如:
$(document).on('click', ".heart", function() {
var count = $(this).next('span');
$(this).toggleClass('notliked liked');
if ($(this).hasClass('liked')) {
count.text(Number(count.text()) + 1);
} else {
count.text(Number(count.text()) - 1);
}
});
.heart.notliked {
color: grey;
font-size: 20px;
}
.heart.liked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p>robert stephen</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 100 </span><br>
<p>James Camroon</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 101 </span><br>
<p>John Wick</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 37 </span><br>
<p>James Bond</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 22 </span><br>
<p>Avengers</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 90 </span>
关于javascript - 多个fa-heart喜欢计数递增和递减,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52099201/