Question

它有增量/减量并且它做了我想要的，但问题是它们都在一起变化而我想将计数器1与计数器2分开，这意味着如果我想改变计数器1的值，它不必影响计数器2，反之亦然。

我基本上可以给计数器2个不同的类名并为它编写另一个脚本，但考虑到计数器会很多，这是很多工作。

所以我该怎么做？

Javascript代码

$(".increment").click(function() {
  var score1 = $(".score").val();
  score1++;
  $(".score").val(score1);
});

$(".decrement").click(function() {
  var score1 = $(".score").val();
  if (score1 == 0) {
  } else {
    score1--;
    $(".score").val(score1);
  }
});

Answer 1

两个计数器都使用具有相同.score类的元素来保持分数。因此每个元素都会更新.score。您应该使用ID而不是类，或者（最好）动态创建元素并直接分配行为。

例如：

Answer 2

将JavaScript更改为此

$(".increment").click(function() {

  var score1 = $(this).next().find('.score').val();
  score1++;
  $($(this).next().find('.score').val(score1));
});

$(".decrement").click(function() {
  var score1 = $(this).prev().find('.score').val();
  if (score1 == 0) {
  } else {
    score1--;
    $(this).prev().find('.score').val(score1);
  }
});

而不是将值设置为.score根据选择的增量或减量选择找到分数

这是一个有效的代码集https://codepen.io/anon/pen/xrYoRr#anon-login

Answer 3

我对您的代码进行了一些更改：

<div class="row">
  <div class="col-xs-6">
    <div class="row end-xs">      
      <div class="row middle-xs">
          <p>Counter1</p>
      </div>       
      <div class="prdin">
        <div class="increment-c1">
          <i class="icon-arrow-up icons"></i>
        </div>
        <div id="input1">
          <input type="number" class="score1" value="0">
        </div>
        <div class="decrement-c1">
          <i class="icon-arrow-down icons"></i>
        </div>
      </div>   
    </div>
  </div>

  <div class="col-xs-6">
    <div class="row start-xs">
      <div class="prdin">
        <div class="increment-c2">
          <i class="icon-arrow-up icons"></i>
        </div>
        <div id="input2">
          <input type="number" class="score2" value="0">
        </div>
        <div class="decrement-c2">
          <i class="icon-arrow-down icons"></i>
        </div>
      </div>
      <div class="row middle-xs">
          <p>Counter2</p>
      </div>
    </div>
  </div>
</div>

javascript代码如下：

$(".increment-c1").click(function() {
  var score1 = $(".score1").val();
  score1++;
  $(".score1").val(score1);
});

$(".decrement-c1").click(function() {
  var score1 = $(".score1").val();
  if (score1 == 0) {
  } else {
    score1--;
    $(".score1").val(score1);
  }
});
$(".increment-c2").click(function() {
  var score1 = $(".score2").val();
  score1++;
  $(".score2").val(score1);
});

$(".decrement-c2").click(function() {
  var score1 = $(".score2").val();
  if (score1 == 0) {
  } else {
    score1--;
    $(".score2").val(score1);
  }
});

分隔输入值

3 个答案: