改变增量减量的方框

Question

我正在尝试增加减量框。

点击demo

我想要这样的方框

我认为需要更改html代码

jQuery(function() {

    jQuery("div.add-to-cart .qty_pan").append('<div class="inc add">&#8250;</div><div class="dec add">&#8249;</div>');

    jQuery(".inputQty").on('click', '.add', 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="qty_pan">
        <input type="number" min="1" max="1000" name="qty" id="qty" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
</div>

请帮我编辑具有相同功能的此框

Answer 1

以下是您喜欢的事情。

＆＃13;

＆＃13;

$(function(){
    $("#plus").click(function(){
      $("#qty").val( Number($("#qty").val()) + 1 );
    });
     $("#minus").click(function(){
      $("#qty").val( Number($("#qty").val()) - 1 );
    });
  });

＆＃13;

.btnplus{
    display:inline-block;
}

.qty_pan{
    display:inline-block;
}

.btnminus{
    display:inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="plus" class="btnplus">+</button>
<div class="qty_pan">
        <input type="text" min="1" max="1000" name="qty" id="qty" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
</div>
<button id="minus" class="btnminus">-</button>

＆＃13;

＆＃13;

＆＃13;

代码中的

更改/更新如下：

＆＃13;

＆＃13;

jQuery(function() {

    jQuery("div.add-to-cart .qty_pan").append('<div class="inc add">&#8250;</div><div class="dec add">&#8249;</div>');

    jQuery("#plus, #minus").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);
    });
  
});

＆＃13;

.btnplus{
    display:inline-block;
}

.qty_pan{
    display:inline-block;
}

.btnminus{
    display:inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="plus" class="btnplus">+</button>
<div class="qty_pan">
        <input type="number" min="1" max="1000" name="qty" id="qty" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
</div>
<button id="minus" class="btnminus">-</button>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。

Answer 2

试试这个：

$('#inc, #dec').on('click', function(){
  var val = +$('#qty').val();
  this.id === "inc" ? $('#qty').val(val+1) : $('#qty').val(val-1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qty_pan">
        <span id='dec'> - </span><input type="number" min="1" max="1000" name="qty" id="qty" value="1" title="" class="input-text qty" /><span id='inc'> + </span>
</div>