0

我正在用 php 和 javascript 创建一个简单的应用程序。我想做的一件事是对大量输入字段（超过 100 个）使用 jquery 微调器控件。

该网站可以在这里找到：https ://www.myweb.ttu.edu/timothsm/alchemy

现在脚本正在超时尝试在 javascript 中创建 100 个微调器有没有更好的方法来做到这一点？还是我应该找到不同的方式？（我现在只在第一个输入字段上创建一个微调器，但下面的代码是我用来对所有输入字段执行此操作的代码）

这是我用来创建微调器的代码：

$(function() {
    $("#ings input.spinner").spinner({
        spin : function(event, ui) {
            if (ui.value > 500) {
                $(this).spinner("value", 500);
                return false;
            } else if (ui.value < 0) {
                $(this).spinner("value", 0);
                return false;
            }
        }
    });
    $("input.spinner").val(0)
});
4

3 回答 3

1

这里只是一些提示。它们可能对您尝试做的事情的性能没有太大帮助，但它们是对您的代码的改进。

使用最小值和最大值调用微调器函数的更好方法是使用min和max设置，如下所示：

$(function() {
    $("#ings input.spinner").spinner({
        min: 0,
        max: 500
    });
    $("#ings input.spinner").val(0)
});​

您还应该为输入标签指定 type 属性：

<input type="text" class="spinner" id="[your_input_id]" />

将来，通过更好的浏览器支持，您将能够仅使用 html5number输入类型而不是 javascript 来执行此操作。现在它只适用于像 Chrome 这样的 webkit 浏览器：

<input type="number" min="0" max="500" class="spinner" id="[your_input_id]" />

换一种说法，为您的元素提供良好的自我描述性 id 和类名。

而不是这样：

<div id="ings" class="inglist"> ... </div>

将它们命名为：

<div id="ingredients" class="ingredientList"> ... </div>
于 2012-12-11T00:07:01.283 回答
1

您可以按需创建微调器。演示

var makeSpinner = function() {
    $("#ings").find(".ui-spinner-input").spinner('destroy'); //kill prev if any
    $(this).spinner({ //init new
        min: 0,
        max: 500
    });
}

//process clicks on spinners place holders
$("#ings").on('click', 'input.spinner', makeSpinner);
于 2012-12-11T00:30:19.183 回答
0

这是工作打字的链接

var makeSpinner = function() {
    $("ings").find(".ui-spinner-input").spinner('destroy');
    $(this).spinner({
        min: 0,
        max: 500
    })
    $(this).focus(); } $("#ings").on('click', 'input.spinner', makeSpinner);
于 2017-05-31T11:51:08.397 回答