防止多个计数器同时增加或减少 [英] Prevent multiple counters to increment or decrement simultaneously

问题描述

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

I have a simple counter the increment and decrement depends on what operation you choose.

及其正常工作.

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

The problem is when I create multiple counters it simultaneously change or update the value.

谢谢，希望你能理解我.

Thanks, hope you understand me.

我更新了代码段

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+'%');
});

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

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

推荐答案

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

Inside your click function, replace $input with $(this).siblings().find("input")

这将寻找输入.

我已经对您的代码进行了一些更新.

I've updated your code a bit.

$(".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+'%');
});

演示

$(".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+'%');
});

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

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

这篇关于防止多个计数器同时增加或减少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！