Javascript 分离输入值

我有这个

它有递增/递减，它做我想做的，但问题是它们一起改变，我想把计数器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);
  }
});

---

两个计数器都使用具有相同

.score

类的元素来保留分数。因此，每个元素都会同时更新

.score

。您应该使用ID而不是类，或者（最好）动态创建元素并直接分配行为

例如：

---

两个计数器使用具有相同

.score

类的元素来保留分数。因此，每个元素都会同时更新

.score

。您应该使用ID而不是类，或者（最好）动态创建元素并直接分配行为

例如：

---

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

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

---

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

<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").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，而是根据选择的递增或递减选项查找分数

---

这是一个工作代码笔

将您的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，而是根据选择的递增或递减选项查找分数

---

这是一个工作代码笔

寻求调试帮助的问题（“为什么此代码不工作？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。与问题无关，但您的代码具有重复的ID。您需要对此进行补救。寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现此问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。与问题无关，但您的代码具有重复的ID。你会想补救的。谢谢你的工作，但我在op中说过我可以这样做，所以计数器可以多达20个，所以这个解决方案没有帮助。好的@Karthik Ganesan的回答解决了这个问题。我想。谢谢你的工作，但我在op中说过我可以这样做，所以计数器可以多达20个，所以这个解决方案没有帮助。好的@Karthik Ganesan的回答解决了这个问题。我想是吧。