So implementieren Sie die Funktion zum Erhöhen und Verringern von Eingabefeldnummern in JQuery

In der Webentwicklung werden häufig Funktionen zum Erhöhen und Verringern der Anzahl von Eingabefeldern verwendet, z. B. die Anzahl der Einkaufswagen, die Anzahl der Produkte usw. In diesem Artikel wird erläutert, wie Sie mit jquery die Anzahl der Eingabefelder erhöhen und verringern.

Code-Implementierung:

Zuerst müssen Sie die JQuery-Bibliotheksdatei einführen:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

Dann fügen Sie ein Eingabefeld und zwei Schaltflächen zum Hinzufügen hinzu und Zahlen reduzieren.

<input type="text" id="input_num" value="1" />
<button id="btn_reduce">-</button>
<button id="btn_add">+</button>

Dann können wir im Javascript-Code die oben definierten Eingabefeld- und Schaltflächenelemente über den JQuery-Selektor abrufen und Ereignis-Listener hinzufügen.

$(function() {
  var inputNum = $('#input_num');
  var btnAdd = $('#btn_add');
  var btnReduce = $('#btn_reduce');
  
  // 增加数字
  btnAdd.on('click', function() {
    var num = parseInt(inputNum.val());
    inputNum.val(num + 1);
  });
  
  // 减少数字
  btnReduce.on('click', function() {
    var num = parseInt(inputNum.val());
    if(num > 1) {
      inputNum.val(num - 1);
    }
  });
});

Codeanalyse:

Zuerst verwenden wir den JQuery-Selektor, um die Eingabefeld- und Schaltflächenelemente abzurufen und sie in Variablen zu speichern.

Als nächstes fügen wir einen Klickereignis-Listener hinzu, um auf Schaltflächenklickereignisse zu warten.

Im Schaltflächenklickereignis verwenden wir die Methode val(), um den Wert im Eingabefeld abzurufen und ihn über die Methode parseInt() in einen Ganzzahltyp umzuwandeln.

Im Klickereignis der Schaltfläche „Hinzufügen“ erhöhen wir ihren Wert um 1 und verwenden die Methode val(), um den neuen Wert an das Eingabefeld zu übergeben.

Im Klickereignis der Schaltfläche „Reduzieren“ ermitteln wir zunächst, ob der Wert des Eingabefelds größer als 1 ist, und reduzieren in diesem Fall seinen Wert um 1.

Zusammenfassung:

Durch die obige Codeimplementierung können wir eine einfache Funktion zum Erhöhen und Verringern der Eingabefeldnummern implementieren. Darüber hinaus können wir durch ähnlichen Code auch weitere Funktionen implementieren, z. B. die Begrenzung der Maximal- und Minimalwerte des Eingabefelds. jquery ist eine leistungsstarke Javascript-Bibliothek, die viele praktische Methoden und Funktionen bereitstellt, die unsere Entwicklungsarbeit erheblich vereinfachen können. Daher ist das Erlernen und Beherrschen von JQuery für Webentwickler sehr wichtig.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Erhöhen und Verringern von Eingabefeldnummern in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!