如何将加号和减号附加到数字输入和更新值

How to append plus and minus to number input and update value

本文关键字：数字输入 更新      更新时间：2023-09-26

我正在为一个旅游网站构建一个表单，并有一个部分显示"添加参与者"。我使用了数字输入，因此当它设置为"1"时，它会添加一组字段，并重复直到最大值 5。

我现在附加了一个加号和减号按钮来更改值，因此表单看起来更具吸引力，但是尽管值正在更改，但它没有注册以显示隐藏字段。

这是我使用附加按钮更改值的代码：

    $(".test-fill").append('<div class="inc button">+</div><div class="dec button">-</div>');
    $(".button").on("click", function() {
    var $button = $(this);
    var oldValue = $button.parent().find(".test").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(".test").val(newVal);
       });

这是我根据值显示隐藏字段的代码：

    //Hide the field initially
$("#hide1, #hide2").hide();
//Show the text field only when the third option is chosen - this doesn't
$('#awesome').change(function() {
    if ($("#awesome").val() == "1") {
        $("#hide1").slideDown();
        $("#hide2, #hide3, #hide4, #hide5").slideUp();
    }
    else if ($("#awesome").val() == "2") {
        $("#hide2").slideDown();
        $("#hide3, #hide4, #hide5").slideUp();
    }
    else if ($("#awesome").val() == "3") {
        $("#hide3").slideDown();
        $("#hide4, #hide5").slideUp();
    }
    else if ($("#awesome").val() == "4") {
        $("#hide4").slideDown();
        $("#hide5").slideUp();
    }
    else if ($("#awesome").val() == "5") {
        $("#hide5").slideDown();
    }
    else {
        $("#hide1, #hide2, #hide3, #hide4, #hide5").slideUp();
    }
});

这是我的 HTML：

<p>Add participant<br />
<div class="test-fill">
[number number-658 min:0 max:5 id:awesome class:test]
</div>
<div id="hide1">
<h4>Second Participants Information</h4>
<p>Full Name<br />
[text text-995]</p>
<p>Sex<br />
[text text-500]</p>
<p>Age<br />
[text text-379] </p>
<p>Passport Country of Issue<br />
[text text-591] </p>
</div>
<div id="hide2">
<h4>Third Participants Information</h4>
<p>Full Name<br />
[text text-995]</p>
<p>Sex<br />
[text text-500]</p>
<p>Age<br />
[text text-379] </p>
<p>Passport Country of Issue<br />
[text text-591] </p>
</div>
<div id="hide3">
<h4>Fourth Participants Information</h4>
<p>Full Name<br />
[text text-995]</p>
<p>Sex<br />
[text text-500]</p>
<p>Age<br />
[text text-379] </p>
<p>Passport Country of Issue<br />
[text text-591] </p>
</div>
<div id="hide4">
<h4>Fifth Participants Information</h4>
<p>Full Name<br />
[text text-995]</p>
<p>Sex<br />
[text text-500]</p>
<p>Age<br />
[text text-379] </p>
<p>Passport Country of Issue<br />
[text text-591] </p>
</div>
<div id="hide5">
<h4>Sixth Participants Information</h4>
<p>Full Name<br />
[text text-995]</p>
<p>Sex<br />
[text text-500]</p>
<p>Age<br />
[text text-379] </p>
<p>Passport Country of Issue<br />
[text text-591] </p>
</div>

（我正在使用联系表格 7 进行 wordpress）

如果我理解正确，你的问题是这样的：按钮单击不会更改选择字段，因此不会执行您的功能。

解决此问题的最简单方法是将代码放在更改事件中$（'#awesome'）.change（function（） {} ...

在函数（changeTheForm（））中，然后在调整选择输入的值后立即调用它。

$button.parent().find("#awesome").val(newVal);
// you want your code to run now..
changeTheForm();

您不需要依赖检测选择更改/选择输入，实际上在我看来，最好将其删除并稍微修改脚本。

但是，在读取未选择任何选项的选择字段的值时，您可能会遇到 NaN 错误。您应该很容易找到解决此问题的方法。

相关文章：