如何在數字輸入和更新值的后面加上正負號

Question

我正在為旅游網站建立表單，並在其中顯示“添加參與者”的部分。 我已經使用了數字輸入，因此當將其設置為“ 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）

Answer 1

如果我理解正確，那么您的問題是這樣的：單擊按鈕不會更改選擇字段，因此不會執行您的功能。

解決此問題的最簡單方法是將代碼放入更改事件$（'＃awesome'）。change（function（）{} ...

在函數（ changeTheForm（） ）中，然后在調整選擇輸入的值之后立即調用它。

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

我認為，您不必依靠檢測選擇更改/選擇輸入，實際上最好將其刪除並重新編寫腳本會更好。

但是，在讀取未選擇任何選項的選擇字段的值時，您可能會遇到NaN錯誤。 您應該很容易找到解決此問題的方法。