Javascript 多个递增和递减按钮

基本上我有四个计时器选择器，一个用于开始时间，一个用于结束时间。开始时间分为startHour和startMin，结束时间也一样。以下是我如何设置startTime的：

    htmlStr += "<tr><td><input type='button' id='startHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour();' /><input type='button' id='startMinPlus' value='+' class='qtyplus' field='quantity' onClick='plusMin();' /><br/>";
htmlStr += "<input type='text' id='startHour' name='quantity' value='0' class='qty' /><input type='text' id='startMin' name='quantity' value='0' class='qty' /><br/>";
htmlStr += "<input type='button' id='startHourMinus' value='-' class='qtyminus' field='quantity'  onClick='minusHour();'/><input type='button' id='startMinMinus' value='-' class='qtyminus' field='quantity'  onClick='minusMin();' /></td>";

最后：

htmlStr += "<td><input type='button' id='endHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour();' /><input type='button' id='endMinPlus' value='+' class='qtyplus' field='quantity' onClick='plusMin();' /><br/>";
htmlStr += "<input type='text' id='endHour' name='quantity' value='0' class='qty' /><input type='text' id='endMin' name='quantity' value='0' class='qty' /><br/>";
htmlStr += "<input type='button' id='endHourMinus' value='-' class='qtyminus' field='quantity' onClick='minusHour();' /><input type='button' id='endMinMinus' value='-' class='qtyminus' field='quantity' onClick='minusMin();' /></td></tr>";

单击加号和减号时，它共享相同的函数。以下是我的JavaScript：

function plusHour() {
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
// If is not undefined
if (!isNaN(currentVal)) {
    // Increment
    if (currentVal < 24) {
        $('input[name=' + fieldName + ']').val(currentVal + 1);
    }
}
// Otherwise put a 0 there
$('input[name=' + fieldName + ']').val(0);
}
function plusMin() {
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
        // Increment
        if (currentVal < 60) {
            $('input[name=' + fieldName + ']').val(currentVal + 1);
        }
    }
    // Otherwise put a 0 there
    $('input[name=' + fieldName + ']').val(0);
}
function minusHour() {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name=' + fieldName + ']').val(0);
    }
}
function minusMin() {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name=' + fieldName + ']').val(0);
    }
}

这是我的小提琴：第一把和第二把是开始的，最后两把是结束的

但是，当我在开始或结束时间上单击递增和递减按钮时，文本框不显示值。我不知道我做错了哪一部分

提前谢谢

因为您使用的是e.preventDefault；你需要申报e

另外，您正在内联地附加click处理程序，因此在处理程序内部，它将引用窗口对象。您需要显式地传递元素的引用，如下所示

<input type='button' id='startHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour(this);' />

然后，您的逻辑出现问题-在每个函数的末尾，您只需将文本框值设置为0

$('input[name=' + fieldName + ']').val(0);

它应该在else条件内

---

1删除e.preventDefault；。由于没有对象e，因此它会阻止脚本执行并出现错误

2所有文本框的名称和数量相同。在代码中，您使用输入名称访问元素。这不是模棱两可吗？它将使用哪个输入值？将其更改为文本框唯一的输入id。

试试这个

我刚刚编辑了你以前的文章，我想这会对你有所帮助

这是我的第一张表格

<form id='myform1' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>

这是我的第二张表格

<form id='myform2' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity1' />
    <input type='text' name='quantity1' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity1' />
</form>

我更改了输入的名称和字段，因此用户单击字段的任何按钮都将是要更改值的输入

---

我希望它能帮助你。只需查看示例代码并进行分析。

使用jQuery为所有操作生成单个函数：

$(document).ready(function(){

            $("#startHourPlus,#startMinPlus,#endHourPlus,#endMinPlus,#startHourMinus,#startMinMinus,#endHourMinus,#endMinMinus").click(function()
            {
                var operation = $(this).val(); // + or -
                var currentField = $("#" + $(this).attr("field"));              
                var currValue = parseInt(currentField.val());
                // Determine whether its PLUS or MINUS operation
                if(operation == "+")
                {               
                    if (!isNaN(currValue))
                    {   
                        // If its hours, limit it to 24 as max
                        if($(this).attr("field").contains("Hour"))
                        {
                            if(currValue < 24)
                                $(currentField).val(currValue+1);
                            else
                                $(currentField).val(0);
                        }
                        // If its mins, limit it to 60 as max
                        else if($(this).attr("field").contains("Min"))
                        {
                            if(currValue < 60)
                                $(currentField).val(currValue+1);
                            else
                                $(currentField).val(0);
                        }

                    }
                }
                else if(operation == "-")
                {
                    if (!isNaN(currValue) && currValue > 0) 
                        $(currentField).val(currValue-1);
                    else
                        $(currentField).val(0);
                }

            });
        });

=====================================================

您的HTML将看起来像下面的几个Id和删除的onclick：

<table>
    <tr>
        <td>
            <input type='button' id='startHourPlus' value='+' class='qtyplus' field='txtstartHour'/>
            <input type='button' id='startMinPlus' value='+' class='qtyplus' field='txtstartMin' />
            <br/>
            <input type='text' id='txtstartHour' name='quantity' value='0' class='qty' />
            <input type='text' id='txtstartMin' name='quantity' value='0' class='qty' />
            <br/>
            <input type='button' id='startHourMinus' value='-' class='qtyminus' field='txtstartHour' />
            <input type='button' id='startMinMinus' value='-' class='qtyminus' field='txtstartMin' />
        </td>

        <td>
            <input type='button' id='endHourPlus' value='+' class='qtyplus' field='txtendHour' />
            <input type='button' id='endMinPlus' value='+' class='qtyplus' field='txtendMin' />
            <br/>
            <input type='text' id='txtendHour' name='quantity' value='0' class='qty' />
            <input type='text' id='txtendMin' name='quantity' value='0' class='qty' />
            <br/>
            <input type='button' id='endHourMinus' value='-' class='qtyminus' field='txtendHour' />
            <input type='button' id='endMinMinus' value='-' class='qtyminus' field='txtendMin' />
        </td>
    </tr>
</table>

---

让我知道它是否适合你。演示

您不能简单地使用$this.val而不是var currentVal=parseInt$'input[name='+fieldName+'].val；，来获取值吗？事实上，fiddle会有所帮助。这里是fiddle：始终将parseInt与其第二个参数一起使用，以确保不会得到意外的值。parseIntmyVal，10表示十进制数。但我需要逐个设置它。不是一下子。因此，我必须创建8个方法，而不是4？@9dollars99美分。然而，当我在开始或结束时间上单击递增和递减按钮时，文本框不会显示值。我不知道我做错了哪一部分。我希望答案涵盖了这个问题。我们不是来为您编写整个应用程序的……您只是根据您从解决当前问题的答案中得到的结果提出新问题，甚至没有投票……这对您的进一步帮助一点也不鼓励……好的，当然，非常感谢。我已经解决了这个问题，但我不认为这是最好的解决方案，因为我只是在开始和结束时间重复函数。这是相同的概念。重要的是，你在不同的输入中使用相同的函数，并给出你想要的结果。不知道为什么它不起作用。我在这里寄出之前检查过了。试试这个9美元99美分怎么样？你能测试它吗？如果不是通过fiddle，您可以在本地html副本中复制粘贴上述代码并查看。我通过使用不同的id启动每个输入来解决它。然后，当触发任何事件时，它将调用不同的方法。例如，startHour加号和减号，startMin加号和减号，endHour和endMin也是如此。所以我一共得到了8个函数。我不确定这是一个聪明的方法，但不知怎么的，它的工作。谢谢。毫无疑问，它将作为单独的功能工作。然而，上面我创建了一个函数，它将触发事件，就好像它正在处理8个不同的按钮一样。不管怎样，无论哪种方式对你来说更容易理解，都是更好的方式。快乐的编码。我想尝试用单一功能来处理8个不同的按钮。但是你能让小提琴工作吗？

$(document).ready(function(){

            $("#startHourPlus,#startMinPlus,#endHourPlus,#endMinPlus,#startHourMinus,#startMinMinus,#endHourMinus,#endMinMinus").click(function()
            {
                var operation = $(this).val(); // + or -
                var currentField = $("#" + $(this).attr("field"));              
                var currValue = parseInt(currentField.val());
                // Determine whether its PLUS or MINUS operation
                if(operation == "+")
                {               
                    if (!isNaN(currValue))
                    {   
                        // If its hours, limit it to 24 as max
                        if($(this).attr("field").contains("Hour"))
                        {
                            if(currValue < 24)
                                $(currentField).val(currValue+1);
                            else
                                $(currentField).val(0);
                        }
                        // If its mins, limit it to 60 as max
                        else if($(this).attr("field").contains("Min"))
                        {
                            if(currValue < 60)
                                $(currentField).val(currValue+1);
                            else
                                $(currentField).val(0);
                        }

                    }
                }
                else if(operation == "-")
                {
                    if (!isNaN(currValue) && currValue > 0) 
                        $(currentField).val(currValue-1);
                    else
                        $(currentField).val(0);
                }

            });
        });

<table>
    <tr>
        <td>
            <input type='button' id='startHourPlus' value='+' class='qtyplus' field='txtstartHour'/>
            <input type='button' id='startMinPlus' value='+' class='qtyplus' field='txtstartMin' />
            <br/>
            <input type='text' id='txtstartHour' name='quantity' value='0' class='qty' />
            <input type='text' id='txtstartMin' name='quantity' value='0' class='qty' />
            <br/>
            <input type='button' id='startHourMinus' value='-' class='qtyminus' field='txtstartHour' />
            <input type='button' id='startMinMinus' value='-' class='qtyminus' field='txtstartMin' />
        </td>

        <td>
            <input type='button' id='endHourPlus' value='+' class='qtyplus' field='txtendHour' />
            <input type='button' id='endMinPlus' value='+' class='qtyplus' field='txtendMin' />
            <br/>
            <input type='text' id='txtendHour' name='quantity' value='0' class='qty' />
            <input type='text' id='txtendMin' name='quantity' value='0' class='qty' />
            <br/>
            <input type='button' id='endHourMinus' value='-' class='qtyminus' field='txtendHour' />
            <input type='button' id='endMinMinus' value='-' class='qtyminus' field='txtendMin' />
        </td>
    </tr>
</table>