Question

我正在研究一个简单的计数器，它增加和减少1取决于它选择的操作。我的问题是，当我尝试转换为默认值为0.1％的百分比时，它会增加或减少0.1％。

柜台不再起作用了。

谢谢，希望你能理解我。

var $input = $(".counter-percentage input");

$input.val(1);

$(".counter-percentage .operation").click(function() {
  if ($(this).hasClass('add'))
    $input.val(parseInt($input.val()) + 1);
  else if ($input.val() >= 2)
    $input.val(parseInt($input.val()) - 1);
});

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>

Answer 1

您只需将0.x%转换为0.x，然后将此值与相应的增量和减量进行比较。而不是parseInt()我使用+一元运算符将字符串转换为数字，因为parseInt将使0.1到0。

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>

Answer 2

使用此关键字而不是dom

的直接加肥输入

$（本）.closest（＆＃39; .closest-祖先＆＃39）

以这种方式，impect将仅限于当前值

增量和减量百分比

2 个答案: