Question

我试图通过jQuery进行增量递减。

jQuery(function() {

    jQuery("div.inputQty").append('<div class="inc add">&#43;</div><div class="dec add">&#8722;</div>');

    jQuery(".add").click(function() {
        var jQueryadd = jQuery(this);
        var oldValue = jQueryadd.parent().find("input").val();
		var newVal = 0;
    
        if (jQueryadd.text() == "›") {
    	   newVal = parseFloat(oldValue) + 1;
    	  // AJAX save would go here
    	} else {
    	  // Don't allow decrementing below zero
    	  if (oldValue > 1) {
    	      newVal = parseFloat(oldValue) - 1;
    	      // AJAX save would go here
    	  }
		  if(oldValue == 1){
			  newVal = parseFloat(oldValue);
			  }
    	}
    	jQueryadd.parent().find("input").val(newVal);
    });
	

});

<div class="inputQty">
        <span class="up">&#43;</span>         
        <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/> 
        <span class="down">&#8722;</span>
</div>

但它不起作用。请帮我解决这个问题

Here是演示

Answer 1

你可以这样尝试

jQuery(function() {

    jQuery("div.inputQty").append('<div class="inc add">&#43;</div><div class="dec add">&#8722;</div>');

    jQuery(".add, .up, .down").click(function() {
        var jQueryadd = jQuery(this);
        var oldValue = jQueryadd.parent().find("input").val();
        var newVal = 0;

        if (jQueryadd.text() == "+") {
           newVal = parseFloat(oldValue) + 1;
          // AJAX save would go here
        } else {
          // Don't allow decrementing below zero
          if (oldValue > 1) {
              newVal = parseFloat(oldValue) - 1;
              // AJAX save would go here
          }
          if(oldValue == 1){
              newVal = parseFloat(oldValue);
              }
        }
        jQueryadd.parent().find("input").val(newVal);
    });


});

我认为它对你有帮助

Answer 2

您忘了在测试中加载jQuery库。

此外，只要您已经拥有jQuery("div.inputQty").append('<div class="inc add">+</div><div class="dec add">−</div>');和up跨度，就不需要此行down。

工作的js代码是：

jQuery(function() {

    jQuery('.add').on('click', function() {
        var jQueryadd = jQuery(this);
        var oldValue = jQueryadd.parent().find("input").val();
        var newVal = 0;

        if (jQueryadd.hasClass('up')) {
           newVal = parseFloat(oldValue) + 1;
          // AJAX save would go here
        } else {
          // Don't allow decrementing below zero
          if (oldValue > 1) {
              newVal = parseFloat(oldValue) - 1;
              // AJAX save would go here
          }
          if(oldValue == 1){
              newVal = parseFloat(oldValue);
          }
        }
        jQueryadd.parent().find("input").val(newVal);
    }); 

});

和HTML：

<div class="inputQty">
        <span class="up add">&#43;</span>
        <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/> 
        <span class="down add">&#8722;</span>
</div>

请参阅working demo

Answer 3

如果要将事件添加到动态新元素中。在这种情况下，您必须使用delegated event

jQuery(".inputQty").on('click', '.add', function() {
    //will work with dynamic elements
}

JsFiddle：http://jsfiddle.net/wLvpavug/5/

Answer 4

我在var＆＃34; oldValue＆＃34;中添加了parseFloat .click函数的行和lastLine

jQuery(function() {

    jQuery("div.inputQty").append('<div class="inc add">ADDDDDDDDD</div><div class="dec add">&#8722;</div>');

    jQuery(".add").click(function() {
        var jQueryadd = jQuery(this);

        var oldValue = parseFloat(jQueryadd.parent().find("input").val());
        console.log(oldValue);
        var newVal = 0;

        if (jQueryadd.text() == "›") {
           newVal = parseFloat(oldValue) + 1;
          // AJAX save would go here
        } else {
          // Don't allow decrementing below zero
          if (oldValue > 1) {
              newVal = parseFloat(oldValue) - 1;
              // AJAX save would go here
          }
          if(oldValue == 1){
              newVal = parseFloat(oldValue);
              }
        }
        jQuery(".input-quantity").val(newVal);
    });


});

检查出来＆gt;＆gt; http://jsfiddle.net/ChoHongRae/nqk6ns4v/

jQuery数字增量递减

4 个答案: