Question

脚本的工作方式是，在单击按钮后，它会为其提供活动类，并增加.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>

Answer 1

剩下的应该减少1，但我不知道怎么做。

您希望增加点击元素的值并且并排减少其余.reaction-btn元素的值。< / p>

//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>

减少没有活动类的元素值“.prev（）”按钮

1 个答案: