So implementieren Sie die Addition, Subtraktion und Löschung von Radioauswahlen in JQuery

Mit der rasanten Entwicklung des Internets hat die Front-End-Technologie immer mehr Aufmerksamkeit auf sich gezogen. JQuery ist eine der am häufigsten verwendeten JS-Bibliotheken im Front-End. Bei der Website-Entwicklung ist es häufig erforderlich, Additions-, Subtraktions- und Löschvorgänge bei der Produktauswahl durchzuführen. In diesem Artikel wird erläutert, wie Sie mit jquery Additionen, Subtraktionen und Löschvorgänge mit Einzelauswahl implementieren.

1. Einzelauswahlvorgang

Bei der Produktauswahl müssen wir normalerweise einen Einzelauswahlvorgang durchführen, das heißt, wir können nur eine aus mehreren Optionen auswählen. Im Folgenden wird anhand einer Produktkategorie gezeigt, wie mit jquery Einzelauswahlvorgänge implementiert werden.

Generieren Sie zunächst mehrere Optionsfelder über das Eingabe-Tag auf der Front-End-Seite, wie im folgenden Code gezeigt:

<div class="category">
  <input type="radio" name="radio" value="1"/>电脑
  <input type="radio" name="radio" value="2"/>手机
  <input type="radio" name="radio" value="3"/>电视
</div>

Der obige Code generiert drei Optionsfelder, ihre Namen sind „Radio“ und ihre Werte sind 1, 2, 3. Der Zweck besteht darin, das Abrufen des ausgewählten Werts über jquery zu erleichtern. Wenn Sie dem Optionsfeld keinen Namen geben, kann jquery den ausgewählten Wert nicht abrufen.

Als nächstes müssen Sie einen JQuery-Code schreiben, um den Radioauswahlvorgang zu implementieren:

$('.category input').click(function(){
  $('.category input').attr('checked',false);
  $(this).attr('checked',true);
})

Die Funktion des obigen Codes besteht darin, das Attribut „geprüft“ aller Schaltflächen auf „false“ zu setzen, wenn der Benutzer auf das Optionsfeld klickt, und es dann festzulegen Die aktuelle Schaltfläche Das Attribut „checked“ ist auf „true“ gesetzt. Dadurch wird sichergestellt, dass jeweils nur ein Optionsfeld ausgewählt ist.

2. Additions- und Subtraktionsoperationen

Als nächstes stellen wir vor, wie man mit jquery Additions- und Subtraktionsoperationen implementiert. Bei der Auswahl von Produkten müssen wir möglicherweise die Menge des Produkts auswählen. In diesem Fall müssen wir dazu die Schaltflächen „Addieren“ und „Subtrahieren“ verwenden. Nehmen wir die Mengenauswahl als Beispiel, um zu demonstrieren, wie mit jquery Additions- und Subtraktionsoperationen implementiert werden.

Generieren Sie zunächst den HTML-Code für die Mengenauswahl auf der Frontend-Seite:

<div class="quantity">
  <button class="minus">-</button>
  <input type="text" name="quantity" value="1" class="number" disabled>
  <button class="plus">+</button>
</div>

Der obige Code generiert ein Mengenauswahlfeld, einschließlich einer Minus-Schaltfläche, eines Mengeneingabefelds und einer Plus-Schaltfläche. Der Anfangswert des Mengeneingabefelds ist 1 und ist deaktiviert, sodass der Benutzer die Menge nur über die Plus- und Minus-Schaltflächen ändern kann. Darüber hinaus erhält jede Schaltfläche einen Klassennamen, um die Bindung über JQuery zu erleichtern.

Als nächstes müssen Sie JQuery-Code schreiben, um Additions- und Subtraktionsoperationen zu implementieren:

$('.quantity .minus').click(function(){
  var num = parseInt($('.quantity .number').val());
  if(num > 1){
    $('.quantity .number').val(num - 1);
  }else{
    alert('数量不能小于1');
  }
})
$('.quantity .plus').click(function(){
  var num = parseInt($('.quantity .number').val());
  $('.quantity .number').val(num + 1);
})

Die Funktion des obigen Codes besteht darin, den aktuellen Wert im Mengeneingabefeld über JQuery abzurufen, wenn der Benutzer auf die Minus-Schaltfläche klickt ist größer als 1. Reduzieren Sie ihn dann um eins. Wenn der Wert gleich 1 ist, kann er nicht weiter reduziert werden und es wird eine Meldung angezeigt. Wenn der Benutzer auf die Plus-Schaltfläche klickt, wird der Wert des Mengeneingabefelds direkt um eins erhöht. Dadurch werden einfache Additions- und Subtraktionsfunktionen erreicht.

3. Löschvorgang

Abschließend stellen wir vor, wie Sie den Löschvorgang mit jquery implementieren. Bei der Produktauswahl müssen wir möglicherweise ein Produkt löschen. In diesem Fall müssen wir die Schaltfläche „Löschen“ verwenden. Nehmen wir die Produktliste als Beispiel, um zu demonstrieren, wie JQuery zum Implementieren des Löschvorgangs verwendet wird.

Generieren Sie zunächst den HTML-Code der Produktliste auf der Startseite:

<ul>
  <li>
    <img src="goods1.jpg">
    <h2>商品1</h2>
    <p>价格：99元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods2.jpg">
    <h2>商品2</h2>
    <p>价格：199元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods3.jpg">
    <h2>商品3</h2>
    <p>价格：299元</p>
    <button class="delete">删除</button>
  </li>
</ul>

Der obige Code generiert eine Produktliste. Jedes Produkt enthält Produktbilder, Produktnamen, Produktpreise und Schaltflächen zum Löschen. Die Schaltfläche „Löschen“ erhält außerdem einen Klassennamen, um die Bindung über JQuery zu erleichtern.

Als nächstes müssen Sie JQuery-Code schreiben, um den Löschvorgang zu implementieren:

$('.delete').click(function(){
  $(this).parent('li').remove();
})

Die Funktion des obigen Codes besteht darin, das übergeordnete Element li der Schaltfläche über JQuery abzurufen, wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, und es dann zu löschen. Dadurch wird der Löschvorgang in der Produktliste implementiert.

Fazit

Anhand der obigen drei Falldemonstrationen können wir sehen, dass gängige Operationen wie Radioauswahl, Addition, Subtraktion und Löschung einfach mit jquery implementiert werden können. Darüber hinaus können wir in der praktischen Anwendung bedarfsgerecht weiter verbessern und optimieren. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Addition, Subtraktion und Löschung von Radioauswahlen in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!