Comment implémenter les fonctions d'augmentation et de diminution des numéros de zone de saisie dans jquery

Dans le développement Web, les fonctions d'augmentation et de diminution du nombre des zones de saisie sont souvent utilisées, comme le nombre de paniers d'achat, le nombre de produits, etc. Cet article explique comment utiliser jquery pour augmenter et diminuer le numéro de la zone de saisie.

Implémentation du code :

Tout d'abord, vous devez introduire le fichier de la bibliothèque jquery :

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

Ensuite, ajoutez une zone de saisie et deux boutons pour augmenter et diminuer les nombres.

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

Ensuite, dans le code Javascript, nous pouvons obtenir les éléments de la zone de saisie et du bouton définis ci-dessus via le sélecteur jquery et ajouter des écouteurs d'événement.

$(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);
    }
  });
});

Analyse du code :

Tout d'abord, nous utilisons le sélecteur jquery pour obtenir les éléments de la zone de saisie et du bouton et les enregistrer dans des variables.

Ensuite, nous ajoutons un écouteur d'événement de clic pour écouter les événements de clic de bouton.

Dans l'événement de clic sur le bouton, nous utilisons la méthode val() pour obtenir la valeur dans la zone de saisie et la convertir en un type entier via la méthode parseInt().

En cas de clic du bouton Ajouter, nous augmentons sa valeur de 1 et utilisons la méthode val() pour transmettre la nouvelle valeur à la zone de saisie.

En cas de clic sur le bouton de réduction, nous déterminons d'abord si la valeur de la zone de saisie est supérieure à 1, et si c'est le cas, décrémentons sa valeur de 1.

Résumé :

Grâce au code ci-dessus, nous pouvons implémenter une fonction simple d'augmentation et de diminution des numéros de zone de saisie. De plus, nous pouvons également implémenter plus de fonctions via un code similaire, comme limiter les valeurs maximales et minimales de la zone de saisie. jquery est une puissante bibliothèque javascript qui fournit de nombreuses méthodes et fonctions pratiques qui peuvent grandement simplifier notre travail de développement. Par conséquent, l’apprentissage et la maîtrise de jquery sont très nécessaires pour les développeurs Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!