分离输入值答案

【问题标题】：Separating input values分离输入值
【发布时间】：2017-07-01 01:39:11
【问题描述】：

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身。没有清晰的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。
与问题无关，但您的代码有重复的 ID。你会想要解决这个问题。

标签： javascript jquery

【解决方案1】：

把你的 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

【讨论】：

【解决方案2】：

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

例如：

【讨论】：

【解决方案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);
  }
});

【讨论】：

感谢您的工作，但我在 op 中说过我可以这样做，因此计数器可以多达 20 个，因此此解决方案无济于事。
好的。 @Karthik Ganesan 的回答解决了这个问题。我猜。