多重增量＆amp;减少按钮

时间：2014-06-18 06:41:37

标签： javascript html increment decrement

基本上我有四个时间选择器，一个用于startTime，一个用于endTime。对于开始时间，它分为startHour和startMin，同样也是endTime。以下是我设置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>";

对于endTime：

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);
    }
}

这是我的小提琴：Fiddle第一个和第二个是startTime，最后两个是endTime。

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

提前致谢。

4 个答案:

答案 0 :(得分：0)

  • 由于您正在使用e.preventDefault();，您需要声明e 

    function plusHour() {
 e= window.event;

  • 此外，您还要内联点击处理程序，因此在处理程序中，this将引用window对象。你需要明确地传递元素的引用，如下所示

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

    您可以在

    这样的功能中访问 
    function plusHour(elm) { //elm now refers to clicked element
 e= window.event;
 e.preventDefault();
 // Get the field name
 fieldName = $(elm).attr('field');

  • 然后您的逻辑存在问题 - 在每个功能的最后，您只需将文本框值设置为0，

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

    应该在else条件内。

JSFiddle

答案 1 :(得分：0)

1）删除e.preventDefault（）;.由于没有对象e，它阻止了脚本执行错误。

2）所有文本框都具有相同的名称“数量”。在代码中，您使用输入名称访问元素。这不是暧昧吗？它将使用哪个输入值？将其更改为输入ID，这对于文本框是唯一的。

答案 2 :(得分：0)

试试这个。

http://jsfiddle.net/puJ6G/849/

我刚刚编辑了您以前的帖子，我认为它会对您有所帮助。

这是我的第一份表格

<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>

我更改了输入和字段的名称，因此用户点击字段传递的按钮将是您要更改值的输入。

我希望它会对你有所帮助。只需查看示例代码并进行分析即可。

答案 3 :(得分：0)

使用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并删除了onClicks）：

<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>

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

相关问题
最新问题