Jquery增加输入框值

时间:2012-02-17 10:45:03

标签: javascript jquery html

$(function() {
    $("#datepicker").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: -0
    });
    $(".minus").click(function() {
        var id = $(this).attr("id").substr(4);
        var value = parseInt($("#value_" + id).val());
        if (value == 0) return false;
        newval = parseInt(value) - 1;
        $("#value_" + id).val(newval)
    });
    $(".plus").click(function() {
        var id = $(this).attr("id").substr(5);
        var value = parseInt($("#value_" + id).val());
        newval = parseInt(value) + 1;
        $("#value_" + id).val(newval)
    });
    $(".value").keydown(function(event) {
        // Allow only backspace and delete
        if (event.keyCode == 46 || event.keyCode == 8) {
            // let it happen
        } else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57) {
                event.preventDefault();
            }
        }
    });
});​

这是我目前的代码,但是它在这里不起作用的是我想要的以下内容:
我有20个输入框 - + 按钮都带有不同的计数器。
HTML示例:

<tr>
    <td><h4>Mozzarella met honing, tomaat en basilicum</h4></td>
    <td width="100" valign="top">EUR 3,75</td>
    <td width="150">
        <input type="hidden" name="naam_3" value="Kaas - Mozzarella met honing, tomaat en basilicum">
        <input type="hidden" name="prijs_3" value="3,75">
        <div class="minus" id="min_wit_3">-</div>
        <input type="text" class="value" id="value_wit_3" name="aantal_3_wit" value="0">
        <div class="plus" id="plus_wit_3">+</div>
        <div class="minus" id="min_bruin_3">-</div>
        <input type="text" class="value" id="value_bruin_3" name="aantal_3_bruin" value="0">
        <div class="plus" id="plus_bruin_3">+</div>
    </td>
</tr>

<tr>
    <td>Boerenbrie</h4></td>
    <td width="100" valign="top">EUR 4,00</td>
    <td width="150">
        <input type="hidden" name="naam_4" value="Kaas - Boerenbrie">
        <input type="hidden" name="prijs_4" value="4">
        <div class="minus" id="min_wit_4">-</div>
        <input type="text" class="value" id="value_wit_4" name="aantal_4_wit" value="0">
        <div class="plus" id="plus_wit_4">+</div>
        <div class="minus" id="min_bruin_4">-</div>
        <input type="text" class="value" id="value_bruin_4" name="aantal_4_bruin" value="0">
        <div class="plus" id="plus_bruin_4">+</div>
    </td>
</tr>

每当我点击 + 按钮时,它必须为1,当我再次点击它时,它必须是2,依此类推。
当我点击 - 按钮时,它会反过来但不能低于0 希望有人知道解决方案。 &LT; br /&gt;
所以基本上我需要1个代码用于多个输入框

网站:http://www.verruklik.nl/bestelformulier/ 尝试并按下+按钮没有任何反应,而de脚本似乎是正确的。

2 个答案:

答案 0 :(得分:2)

问题中发布的代码是有效的 - 脚本无法正常工作此处的原因归因于datepicker

检查代码here并删除日期选择器 检查代码已发布 here与日期选择器不兼容 检查使用datepicker的代码here 注意添加的资源(在左侧,单击管理资源)。

在您的网站上,您已经包含了两个版本的jQuery UI 1.7.2和1.8.14 (第36和37行)这可能会导致冲突,并且可能会破坏javascript。

您的网站上还有其他错误,也可能会破坏内容:
Error: $("ul.sf-menu").supersubs is not a function
Source File: http://www.verruklik.nl/js/onLoad.js
Line: 1

在代码中查找中断的提示,尽可能使用浏览器控制台 如果您使用的是谷歌浏览器,IE9会按F12或Firefox与网站开发者扩展程序按CTRL+SHIFT+J

答案 1 :(得分:1)

您需要向$(".minus")点击处理程序添加一个条件,以检查它是否会使该值小于零。

$(".minus").click(function() {
    var id = $(this).attr("id").substr(4);
    var value = parseInt($("#value_"+id).val());

    if (value == 0) 
        return false;

    newval = parseInt(value) - 1;
    if (newval < 0)
        newval = 0;

    $("#value_"+id).val(newval)
});