防止多个计数器同时递增或递减

Question

我有一个简单的计数器，增量和减量取决于你选择的操作。

并且工作正常。

问题是当我创建多个计数器时，它会同时更改或更新值。

谢谢，希望你能理解我。

我更新了代码段

＆＃13;

＆＃13;

var $input = $(".counter-percentage input");

$input.val("0.1%");

$(".counter-percentage .operation").click(function() {
  var val = +$input.val().replace("%", "");
  console.log(val);
  if ($(this).hasClass('add'))
    $input.val(Math.round((val + 0.1)*10)/10+'%');
  else if (val >= 0.2)
    $input.val(Math.round((val - 0.1)*10)/10+'%');
});

＆＃13;

ul li {
  float: left;
  list-style-type: none;
  border-top: 1px solid rgba(247, 204, 131, 0.3);
  border-right: 1px solid rgba(247, 204, 131, 0.3);
  border-bottom: 1px solid rgba(247, 204, 131, 0.3);
  height: 20px;
  text-align: center;
}

ul li:first-child {
  border: 1px solid rgba(247, 204, 131, 0.3);
  width: 20px;
}

ul li:nth-child(2) {
  width: 75px;
}

ul li:last-child {
  width: 20px;
}

ul li input {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}

ul li.operation {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="counter-percentage">
  <li class="operation minus">-</li>
  <li>
    <span class="value"></span>
    <input type="text" name="" readonly>
  </li>
  <li class="operation add">+</li>
</ul>
<br>
<ul class="counter-percentage">
  <li class="operation minus">-</li>
  <li>
    <span class="value"></span>
    <input type="text" name="" readonly>
  </li>
  <li class="operation add">+</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在点击功能中，将$input替换为$(this).siblings().find("input")

这将查找输入。

我已经更新了你的代码了。

$(".counter-percentage input").val("0.1%");
$(".counter-percentage .operation").click(function() {
  var $input = $(this).siblings().find("input");
  var val = +$input.val().replace("%", "");
  if ($(this).hasClass('add'))
    $(this).siblings().find("input").val(Math.round((val + 0.1)*10)/10+'%');
  else if (val >= 0.2)
    $(this).siblings().find("input").val(Math.round((val - 0.1)*10)/10+'%');
});

<强>演示

＆＃13;

＆＃13;

$(".counter-percentage input").val("0.1%");


$(".counter-percentage .operation").click(function() {
  var $input = $(this).siblings().find("input");
  var val = +$input.val().replace("%", "");
  if ($(this).hasClass('add'))
    $(this).siblings().find("input").val(Math.round((val + 0.1)*10)/10+'%');
  else if (val >= 0.2)
    $(this).siblings().find("input").val(Math.round((val - 0.1)*10)/10+'%');
});

＆＃13;

ul li {
  float: left;
  list-style-type: none;
  border-top: 1px solid rgba(247, 204, 131, 0.3);
  border-right: 1px solid rgba(247, 204, 131, 0.3);
  border-bottom: 1px solid rgba(247, 204, 131, 0.3);
  height: 20px;
  text-align: center;
}

ul li:first-child {
  border: 1px solid rgba(247, 204, 131, 0.3);
  width: 20px;
}

ul li:nth-child(2) {
  width: 75px;
}

ul li:last-child {
  width: 20px;
}

ul li input {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}

ul li.operation {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="counter-percentage">
  <li class="operation minus">-</li>
  <li>
    <span class="value"></span>
    <input type="text" name="" readonly>
  </li>
  <li class="operation add">+</li>
</ul>

<ul class="counter-percentage">
  <li class="operation minus">-</li>
  <li>
    <span class="value"></span>
    <input type="text" name="" readonly>
  </li>
  <li class="operation add">+</li>
</ul>

＆＃13;

＆＃13;

＆＃13;