单击更改下一个或上一个div的值

Question

我正在编写一个按钮来改变它们之间的输入值。

my HTML is:

<td class="uneven">
    <div class="buttonbundle up">+</div>
    <input onkeyup="bundle.changeOptionQty(this, event)" 
           onblur="bundle.changeOptionQty(this, event)" 
           class="input-text qty" 
           id="bundle-option-1-1-qty-input" 
           type="text" 
           name="bundle_option_qty[1][1]" 
           value="1" />
    <div class="buttonbundle down">-</div>
</td>

如果在buttonbundle上使用onclick，它必须获取下一个输入的值，并将其再次输入+1，如果是-1，它必须执行-1。

我想应该是这样的:

jQuery(document).ready(function() {
    jQuery('.buttonbundle.up').on('click',function){
        $val = jQuery(this).next('input').prop("value");
        jQuery(this).next('input').prop("value",$val);
    }
}

或者类似的。

任何想法?

Answer 1

这应该可以为您工作:

$(function() {
    $('.buttonbundle.up').on('click',function(){
        var input = $(this).next('input');
        var x = parseInt(input.val());
        input.val( x + 1 );
    });
    $('.buttonbundle.down').on('click',function(){
        var input = $(this).prev('input');
        var x = parseInt(input.val());
        input.val( x - 1 );
    });
});

<标题>编辑

或封装在一个函数中:

$(function() {
    $('.buttonbundle').on('click',function(){
        var input = $(this).parent().find('input');
        var x = parseInt(input.val());
        var y = $(this).hasClass('up') ? x+1 : x-1;
        input.val( y );
    });
});
// or
jQuery(document).ready(function() {
    jQuery('.buttonbundle').on('click',function(){
        var input = jQuery(this).parent().find('input');
        var x = parseInt(input.val());
        var y = jQuery(this).hasClass('up') ? x+1 : x-1;
        input.val( y );
    });
});

演示2

Answer 2

您需要两个不同的处理程序

jQuery('.buttonbundle.up').on('click', function() {
   var $input = $(this).next('input');
   var $val = parseInt($input.val(), 10);
   $input.val($val+1);
});

了

jQuery('.buttonbundle.down').on('click', function() {
   var $input = $(this).prev('input');
   var $val = parseInt($input.val(), 10);
   $input.val($val-1);
});