So verwenden Sie jQuery zum Erhöhen und Verringern von Eingabewerten

Verwenden Sie jQuery, um die Methode zum Erhöhen und Verringern des Eingabewerts zu realisieren. Wenn es auf vielen E-Commerce-Websites um die Menge der Waren auf der Warenkorbseite geht, Es wird eine +-Taste und eine --Taste bereitgestellt, die zum Erhöhen und Verringern um 1 verwendet werden und nur die Eingabe numerischer Werte in die Eingabe ermöglichen. Zu diesem Zeitpunkt ist jQuery zur Implementierung von und wird von jQueryQuellcode begleitet~

Führen Sie zunächst die erforderlichen CSS- und JS-Dateien ein.

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="Scripts/jquery.bootstrap-touchspin.min.js"></script>

1. Kontrollieren Sie die Genauigkeit numerischer Werte und das automatische Inkrementieren und Dekrementieren

<br />
<div style="margin-left: 10px;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-xs-2">
                    <input id="demo1" type="text" value="55" name="demo1" class="form-control" />
                </div>
            </div>
        </form>
</div>
<script type="text/javascript">
        $(function () {
            $("input[name=&#39;demo1&#39;]").TouchSpin({
                min: 0,
                max: 100,
                step: 0.1,//增量或减量
                decimals: 2, //精度
                boostat: 5,
                maxboostedstep: 10,
                postfix: &#39;%&#39; //后缀
            });
        });
</script>

● Klicken Sie auf die Schaltfläche „+“, um um 0,1 zu erhöhen.● Klicken Sie auf die Schaltfläche „-“, um um 0,1 zu verringern zulässiger Wert ist 0,00
● Der maximal zulässige Wert ist 100,00
● Es sind nur numerische Werte zulässig, ansonsten geht der Fokus verloren und der Minimalwert wird angezeigt 0,00

2. Es sind nur

Ganzzahlen ab 1 zulässig, dies ist auch eine gängige Praxis auf der Warenkorbseite

<div style="margin-left: 10px;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-xs-2">
                    <input id="demo2" type="text" value="1" name="demo2" class="form-control" />
                </div>
            </div>
        </form>
</div>
<script type="text/javascript">
        $(function () {
            $("input[name=&#39;demo2&#39;]").TouchSpin({
                min: 1,
                max: 100,
                step: 1//增量或减量
            });
        });
</script>

● Klicken Sie auf die Schaltfläche „+“, um den Wert um 1 zu erhöhen

● Klicken Sie auf die Schaltfläche „-“, um ihn um 1 zu verringern ● Der minimal zulässige Wert ist 1● Der maximal zulässige Wert ist 100
● Nur numerische Werte ​​sind zulässig, andernfalls geht der Fokus verloren und der Mindestwert wird angezeigt 1

Das Obige zeigt, wie Sie mit jQuery das Inkrementieren und Dekrementieren von Eingabewerten realisieren Wenn Sie mehr wissen möchten, suchen Sie bitte auf der
PHP-Chinese-Website

~

Verwandte Empfehlungen:

So verwenden Sie JQuery, um die Auswahl von Kontrollkästchen, die Umkehrung der Auswahl und die Aufhebung der Auswahl mit einem Klick zu steuern

Was ist der Unterschied zwischen JS und JQUERY

So erzielen Sie mit jQuery einen Lupeneffekt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery zum Erhöhen und Verringern von Eingabewerten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!