ASP.Net文本框上的Javascript / jQuery增量器

Question

我們正在嘗試在ASP.Net文本框中使用Javascript增量器和減量器來增加數值。 默認文本框設置為0。

我們附加2個div，它們會觸發Javascript以遞增和遞減ASP.Net文本框中的值。 值改變了但是...

我們還遇到了一個問題，據說該Javascript應該防止該值降至0以下。但是，當我們將值減至0以下時，文本框將變為空白，然后嘗試進行增值時，將獲得NaN值。 我的計划是僅使減量按鈕在值變為“ 0”時消失。 任何幫助表示贊賞。 是否可以在ASP.Net文本框中使用Javascript / jQuery增量器/減量器？

當值達到“ 0”時，如何使減量器按鈕消失的任何指針；當值高於“ 0”時，重新出現的指針。 如果可以在ASP.Net文本框中使用Java腳本增減，則為PLUS。

提前致謝。

這是我的Javascript：

  if (Modernizr.mq("screen and (max-width:767px)")) {
        if ($('.product-variant-list td span.quantity input.numerictextboxtext:not([disabled])')) {
            $('input.numerictextboxtext:not([disabled])').parent().append('<div class="incButton button">+</div><div class="decButton button">-</div>');
        }

        if ($('input.numerictextboxtext').val() == 0) {
            $(".decButton").hide();
        }
        if ($('input.numerictextboxtext').val() >= 1) {
            $(".decButton").show();
        }

        $(".button").click(function () {
            var $button = $(this);
            var oldValue = $button.parent().find("input.numerictextboxtext").val();

            //TODO: See if you can show and hide button on based on value of textbox
            if(oldValue == 0){
                $(".decButton").hide();
            }
            if (oldValue >= 1) {
                $(".decButton").show();
            }

            if ($button.text() == "+") {
                var newVal = parseFloat(oldValue) + 1;

            } else {
                // Don't allow decrementing below zero - supposedly. But this does not work in our case
                if (oldValue >= 1) {
                    var newVal = parseFloat(oldValue) - 1;
                }
            }
            $button.parent().find("input.numerictextboxtext").val(newVal);
        });//End button click
    }//End Modernizr check

Answer 1

我認為您的問題之一可能在這里。 我已經更改了格式化小程序的格式，以使其更清楚地說明問題所在。

if ($button.text() == "+") {
   var newVal = parseFloat(oldValue) + 1;
} else {
   // Don't allow decrementing below zero - supposedly. But this does not work in our case
   if (oldValue >= 1) {
     var newVal = parseFloat(oldValue) - 1;
   }
}
$button.parent().find("input.numerictextboxtext").val(newVal);

newVal在if子句和else子句中聲明。 但是，隨后您可以在兩個子句之外的表達式中使用它。 因此，在與val()函數一起使用時， newVal尚未定義。

嘗試在定義oldVal地方聲明它。

   $(".button").click(function () {
        var $button = $(this);
        var oldValue = $button.parent().find("input.numerictextboxtext").val();
        var newValue = oldValue; // Declaring the variable here gives it 
                                 // the same scope as oldValue.  Giving it 
                                 // oldValue as a default value means that it
                                 // will have a value even if not assigned to again.

        //TODO: See if you can show and hide button on based on value of textbox
        if(oldValue == 0){
            $(".decButton").hide();
        }
        if (oldValue >= 1) {
            $(".decButton").show();
        }

        if ($button.text() == "+") {
            newVal = parseFloat(oldValue) + 1;
        } else {
            // Don't allow decrementing below zero
            if (oldValue >= 1) {
                newVal = parseFloat(oldValue) - 1;
            }
        }
        $button.parent().find("input.numerictextboxtext").val(newVal);
    });//End button click

Answer 2

我們的問題的答案在這里。 我希望這對其他人有幫助。

     if (Modernizr.mq("screen and (max-width:767px)")) {
        if ($('.product-variant-list td span.quantity input.numerictextboxtext:not([disabled])')) {
            $('input.numerictextboxtext:not([disabled])').parent().append('<div class="incButton button">+</div><div class="decButton button">-</div>');
        }
        if ($('input.numerictextboxtext').val() == 0) {
            $(".decButton").hide();
        }
        $(".button").click(function () {
            var $button = $(this);
            var oldValue = $button.parent().find("input.numerictextboxtext").val();
            var newVal = oldValue;
            //Hide .decButton for oldValue
            if (newVal == 0 || oldValue == 0) {$button.parent().find(".decButton").hide(); oldValue = 0}
            else {$button.parent().find(".decButton").show();}
            if ($button.text() == "+") { var newVal = parseFloat(oldValue) + 1;} else {
                // Don't allow decrementing below zero
                if (oldValue >= 1) {var newVal = parseFloat(oldValue) - 1;}
            }
            //Hide .decButton for newVal
            if (newVal == 0) {$button.parent().find(".decButton").hide();}
            else {$button.parent().find(".decButton").show();}
            $button.parent().find("input.numerictextboxtext").val(newVal);
        });//End button click
    }//End Modernizr check