如何使用jQuery在一次(+/-)单击中增加多个字段的值

根据文章"如何增加数量字段的值"，我试图找到一种方法，如何通过单击+/-按钮在多个字段上进行操作。

我想得到的结果是:当我点击(+)按钮时，一个字段将增加1，并在同一时刻，字段"bestand1"将减少1 -也是另一种方式:增加一个导致在同一时刻减少另一个。

以下是我根据另一篇文章所做的尝试:

<script type="text/javascript">
$(function()
{
    $(".add").click(function()
    {
        var currentVal = parseInt($(this).next(".qty").val());
        var bestandVal = parseInt($(this).next(".bestand").val());
        if (currentVal >= 10)
        {
            $(this).next(".qty").val(currentVal = 10);
        }
        if (currentVal != NaN && currentVal < 10)
        {
            $(this).next(".qty").val(currentVal + 1);
            $(this).next(".bestand").val(bestandVal - 1);
        }  
    });
    $(".minus").click(function()
    {
        var currentVal = parseInt($(this).prev(".qty").val());
        var bestandVal = parseInt($(this).prev(".bestand").val());
        if (currentVal <= 0)
        {
            $(this).next(".qty").val(currentVal = 0);
        }
        if (currentVal != NaN && currentVal > 0)
        {
            $(this).prev(".qty").val(currentVal - 1);
            $(this).prev(".bestand").val(bestandVal - 1);
        }
    });
});
</script>
</head>
<body>
    <form id="myform">
        bestand1
        <input type="text" id="bestand1" value="20" class="bestand" disabled /><br /><br />
        bestand2
        <input type="text" id="bestand2" value="20" class="bestand" disabled /><br /><br />
        product1
        <input type="button" value="+" id="add1" class="add" />        
        <input type="text" id="qty1" value="2" class="qty" disabled/>        
        <input type="button" value="-" id="minus1" class="minus" /><br /><br />
        product2
        <input type="button" value="+" id="add2" class="add" />        
        <input type="text" id="qty2" value="2" class="qty" disabled/>        
        <input type="button" value="-" id="minus2" class="minus" />
    </form>
</body>

这里是，假设您保持add1和minus1链接到qty1和bestand1，和2…等等

$(function()
{
    $(".add").click(function()
    {
        // get id number of the calling elememnt
        var num = parseInt(this.id.substr(3));
        // get jquery elements
        var el_qty = $("#qty"+num);
        var el_bes = $("#bestand"+num);
        // get current values
        var currentVal = parseInt(el_qty.val());
        var bestandVal = parseInt(el_bes.val());
        if (currentVal != NaN && currentVal < 10)
        {
            // increment values
            el_qty.val(++currentVal);
            el_bes.val(--bestandVal);
        }
    });
    $(".minus").click(function()
    {
        // get id number of the calling elememnt
        var num = parseInt(this.id.substr(5));
        // get jquery elements
        var el_qty = $("#qty"+num);
        var el_bes = $("#bestand"+num);
        // get current values
        var currentVal = parseInt(el_qty.val());
        var bestandVal = parseInt(el_bes.val());
        if (currentVal != NaN && currentVal > 0)
        {
            // increment values
            el_qty.val(--currentVal);
            el_bes.val(--bestandVal);
        }
    });
});

你找到相应的best 的概念是错误的

$(this).next(".bestand")

按钮不是+/-按钮的下一个兄弟。

HTML有点不一样，希望没问题…
Html:

<div class="container">
    bestand1
    <input type="text" id="bestand1" value="20" class="bestand" disabled />
    <br /><br />
    product1
    <input type="button" value="+" id="add1" class="add" />        
    <input type="text" id="qty1" value="2" class="qty" disabled/>        
    <input type="button" value="-" id="minus1" class="minus" />
</div> 
<br /><br />
<div class="container">
    bestand2
    <input type="text" id="bestand2" value="20" class="bestand" disabled />
    <br /><br />
    product2
    <input type="button" value="+" id="add2" class="add" />        
    <input type="text" id="qty2" value="2" class="qty" disabled/>        
    <input type="button" value="-" id="minus2" class="minus" />
</div>

Javascript:

$(function()
{
    $(".add").click(function()
    {
        var container = $(this).closest(".container");
        var currentVal = parseInt(container.find(".qty").val());
        var bestandVal = parseInt(container.find(".bestand").val());
        if (currentVal >= 10)
        {
            container.find(".qty").val(currentVal = 10);
        }
        if (currentVal != NaN && currentVal < 10)
        {
            container.find(".qty").val(currentVal + 1);
            container.find(".bestand").val(bestandVal - 1);
        }
    });
    $(".minus").click(function()
    {
        var container = $(this).closest(".container");
        var currentVal = parseInt(container.find(".qty").val());
        var bestandVal = parseInt(container.find(".bestand").val());
        if (currentVal <= 0)
        {
            container.find(".qty").val(currentVal = 0);
        }
        if (currentVal != NaN && currentVal > 0)
        {
            container.find(".qty").val(currentVal - 1);
            container.find(".bestand").val(bestandVal + 1);
        }
    });
});

下面是一个jsfiddle示例:http://jsfiddle.net/pCcBb/

试着看看这个:http://jsfiddle.net/2TJnJ/

这里我链接字段与类到id。

$(function()
{
    $(".add").click(function()
    {
        var currentVal = parseInt($(this).next(".qty").val());
        var getBestandID = "#"+$(this).parent().attr('class');
        var bestandVal = parseInt($(getBestandID).val());
        if (currentVal >= 10)
        {
            $(this).next(".qty").val(currentVal = 10);
        }
        if (currentVal != NaN && currentVal < 10)
        {
            $(this).next(".qty").val(currentVal + 1);
            $(getBestandID).val(bestandVal - 1);
        }  
    });
    $(".minus").click(function()
    {
        var currentVal = parseInt($(this).prev(".qty").val());
        var getBestandID = "#"+$(this).parent().attr('class');
        var bestandVal = parseInt($(getBestandID).val());
        if (currentVal <= 0)
        {
            $(this).next(".qty").val(currentVal = 0);
        }
        if (currentVal != NaN && currentVal > 0)
        {
            $(this).prev(".qty").val(currentVal - 1);
            $(getBestandID).val(bestandVal + 1);
        }
    });
});

相关内容

最新更新

热门标签：