添加 (+/-) 按钮数字增量器

表单上的文本输入可用于提交数字。 常见的用途是电子商务网站上的“数量”输入。 从用户的角度来看，更改数量值需要按 Tab 键或单击输入，删除其当前内容，然后输入新值。 预期行为，没有人会因为你这样做而责怪你，但这些数字输入可以更友好一些。 通过使用 JavaScript（是的，jQuery），让我们就来做吧。

干净的 HTML

这是表单标记。 没有添加额外的内容，只是干净的 HTML。 没有 JavaScript，此表单将完美运行，并且没有多余的内容。

<form method="post" action="">
    <div>
        <label for="name">French Hens</label>
        <input type="text" name="french-hens" id="french-hens" value="3">
    </div>
    <div>
        <label for="name">Turtle Doves</label>
        <input type="text" name="turtle-doves" id="turtle-doves" value="2">
    </div>
    <div>
        <label for="name">Partridges</label>
        <input type="text" name="partridge" id="partridge" value="1">
    </div>
    
    <input type="submit" value="Submit" id="submit">
</form>

CSS...

...并不十分有趣。 也许有几点需要注意。 所有内容都向左浮动，DIV 具有隐藏溢出以清除浮动。 标签是块显示和文本对齐右以获得网格效果。 这里或那里进行了像素调整以使事物对齐。 我没有花太多时间在这个问题上，因此您可能会看到一些跨浏览器差异。

制作一些按钮

使用 Photoshop 制作几个按钮。 也许可以使用精灵图吧？ 我将在下载中包含 PSD，以防您想使用这些按钮。

追加增量按钮

我们需要将这些按钮追加到每个输入框。 您会在标记中注意到每个标签/输入框对都包装在一个 DIV 中。 这是个好习惯，这样标签输入框就会在自己的行上换行（更具可读性），以防 CSS 被关闭。 这也是某些 DOCTYPE 进行验证所必需的。 而且，它是我们可以用来追加这些按钮的理想小钩子。

$(function() {

    $("form div").append('<div class="inc button">+</div><div class="dec button">-</div>');

});

每个按钮有两个类，一个通用的“按钮”类，它将包含 90% 的样式，以及我们将用来绑定点击事件的类。 另一个唯一的类用于调整背景位置并使用精灵图。

让它们生效

“白话”

1. 缓存选择器
2. 保存输入框的“旧”值（点击时的值）
3. 如果点击了“加号”按钮…
4. …将值增加 1
5. 否则，如果点击了“减号”按钮…
6. …将值减少 1
7. 将新值放入输入框

$(".button").on("click", function() {

  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

  if ($button.text() == "+") {
	  var newVal = parseFloat(oldValue) + 1;
	} else {
   // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $button.parent().find("input").val(newVal);

});

上面的代码完成了我们所描述的所有操作，并带有一些额外的逻辑。 在它减少值之前，它会确保该数字至少为 1 或更高。 这将防止该值变为负数（至少通过使用这些按钮是如此）。 这对于“数量”类型的输入框来说是不言而喻的，但如果您的使用场景不需要此功能，只需删除该“if”包装。

还有一些关于 AJAX 保存的注释行。 如果您的应用程序是动态的，您可能希望在按下按钮后自动保存该值，使其感觉更像桌面应用程序。

如果您要这样做，您可以使用类似这样的代码（也许）

var id = $button.attr("id");
$.ajax({
  type: "POST",
  url: "dosomething.php?id=" + id + "&newvalue=" + newVal,
  success: function() {
    $button.parent().find("input").val(newVal);
  }
});

您可能需要移除点击函数的最后一行，该行更新了该值，并将该代码留在上面的“成功”子函数中。 这样，只有在 AJAX 保存成功时，该数字才会在视觉上更新。

查看

查看演示   下载文件

MooTools

和往常一样，David Walsh 提供了 移植到 MooTools 的版本。