该脚本的工作方式是在单击按钮后为其提供活动类并增加 .prev () 元素的值。但是，我想单击另一个元素并给它一个活动类，只是它的值增加了。其余的应该减少1，但我不知道我该怎么做。
click = [0, 0, 0, 0, 0];
$(".reaction-btn").on("click", function() {
index = $(this).parents(".reaction").index(".reaction");
$(".reaction-btn").removeClass("active");
$(this).addClass("active");
if (click[index] % 2 == 0) {
$(this).prev().text(parseInt($(this).prev().text()) + 1);
} else {
$(this).prev().text(parseInt($(this).prev().text()) - 1);
}
click[index]++;
});.active {
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Good</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Super</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Nice</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Bad</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Very bad</button>
</section>其余的应该减少1，但我不知道我该怎么做。
看起来你想增加 clicked element 的值，并排也减少其余.reaction-btn元素的值。
//reduce all reaction-btn value by 1
$(".reaction-btn").not( this ).each( function(){
$(this).prev().text( +$(this).prev().text() - 1 );
});
//increment clicked element value
$(this).prev().text( +$(this).prev().text() + 1 );
演示
click = [0, 0, 0, 0, 0];
$(".reaction-btn").on("click", function() {
//reduce all reaction-btn value by 1
$(".reaction-btn").not( this ).each( function(){
$(this).prev().text( +$(this).prev().text() - 1 );
});
//increment clicked element value
$(this).prev().text( +$(this).prev().text() + 1 );
$(".reaction-btn").removeClass("active");
$(this).addClass("active");
});.active {
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Good</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Super</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Nice</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Bad</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Very bad</button>
</section>或者，如果您只想减少上次点击的元素，则
//reduce all active reaction-btn value by 1
$(".reaction-btn.active").not( this ).each( function(){
$(this).prev().text( +$(this).prev().text() - 1 );
});
演示
click = [0, 0, 0, 0, 0];
$(".reaction-btn").on("click", function() {
//reduce all active reaction-btn value by 1
$(".reaction-btn.active").not( this ).each( function(){
$(this).prev().text( +$(this).prev().text() - 1 );
});
//increment clicked element value
$(this).prev().text( +$(this).prev().text() + 1 );
$(".reaction-btn").removeClass("active");
$(this).addClass("active");
});.active {
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Good</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Super</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Nice</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Bad</button>
</section>
<section class="reaction">
<span class="reaction-counter">1</span>
<button type="button" class="reaction-btn">Very bad</button>
</section>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句