Question

我正在尝试增加和减少数量，但是当我点击wxProgressDialog时，输入的数字不会改变，但仍然是默认值+ or -。

Answer 1

您的代码有效，至少我将面板更改为硬编码HTML并且可以正常工作：

<td>
  <div class="sp-quantity">
    <div class="container" style=" font-size:14px; ">
      <div class="sp-minus fff"> <a class="ddd" href="#">-</a>
      </div>
      <div class="sp-input">
        <input type="text" class="quantity-input" value="1">
      </div>
      <div class="sp-plus fff"> <a class="ddd" href="#">+</a>
      </div>
    </div>
</td>

JS：

$(".ddd").on("click", function() {
  alert('testing');

  var $button = $(this),
    $input = $button.closest('.sp-quantity').find("input.quantity-input");
  var oldValue = $input.val(),
    newVal;

  if ($.trim($button.text()) == "+") {

    newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 0) {
      newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $input.val(newVal);
});

如果你真的想要动态添加元素，这也有效：

HTML：

<div class="panel" />

JS：

$(function() {
  $('.panel').append(
    '<td><div class="sp-quantity">' +
    '<div class="container" style=" font-size:14px; "> ' +
    '<div class="sp-minus fff"> <a class="ddd" href="#">-</a>' +
    '</div>' +
    '<div class="sp-input">' +
    '<input type="text" class="quantity-input" value="1">' +
    '</div>' +
    '<div class="sp-plus fff"> <a class="ddd" href="#">+</a>' +
    '</div>' +
    '</div></td>'
  );
});

$(".panel").on("click", ".ddd", function() {
  alert('testing');

  var $button = $(this),
    $input = $button.closest('.sp-quantity').find("input.quantity-input");
  var oldValue = $input.val(),
    newVal;

  if ($.trim($button.text()) == "+") {

    newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 0) {
      newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $input.val(newVal);
});

https://jsfiddle.net/3hxveuLu/1/

关键是改变你的绑定：

$(".ddd").on("click", function() {

为：

$(".panel").on("click", ".ddd", function() {

推理：当你绑定时，元素还没有在DOM中，所以你基本上想要绑定到容器上，当一个事件冒泡时，如果它与过滤器（“.ddd”）相匹配它就会被处理，如果没有，被忽略。这就是/为什么这样做有效，而你的代码没有。

Answer 2

这只是与您加载<script></script>时相关的问题。在DOM之后加载脚本时，代码可以正常工作。也许您可以考虑使用此answer来查看将script标记放在html中的位置。

我还在你的html中添加了panel课程：<div class="panel"></div>。

＆＃13;

$('.panel').append(
       '<td><div class="sp-quantity">'+
         '<div class="container" style=" font-size:14px; "> '+ 
        '<div class="sp-minus fff"> <a class="ddd" href="#">-</a>'+
        '</div>'+
        '<div class="sp-input">'+
        '<input type="text" class="quantity-input" value="1">'+
        '</div>'+
        '<div class="sp-plus fff"> <a class="ddd" href="#">+</a>'+
        '</div>'+
        '</div></td>'

         )
         
         $(".ddd").on("click", function () {
            alert('testing');

    var $button = $(this),
        $input = $button.closest('.sp-quantity').find("input.quantity-input");
    var oldValue = $input.val(),
        newVal;

    if ($.trim($button.text()) == "+") {

        newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 0) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $input.val(newVal);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
        // I remove the script here
</script>

<div class="panel"></div>

＆＃13;

Answer 3

您可以使用此结构和jQuery来进行脱脂和脱脂（+/-）

function increase(){
                var a = 1;
                var textBox = document.getElementById("text");
                textBox.value++;
                
            }    
            function decrease(){
              var textBox = document.getElementById("text");
                textBox.value--;
            }

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script>            
                
        </script>
	 
</head>
<body>
<button type="button" onclick="increase()">increase</button>
        <input type="text" id="text" value="0">
        <button type="button" onclick="decrease()">Decrease</button>
</body>
</html>

按钮增量或减量数量 - JS

3 个答案: