Bagaimana untuk melaksanakan peningkatan dan penurunan fungsi nombor kotak input dalam jquery

Dalam pembangunan web, bilangan peningkatan dan penurunan fungsi kotak input sering digunakan, seperti bilangan troli beli-belah, bilangan produk, dsb. Artikel ini akan memperkenalkan cara menggunakan jquery untuk menambah dan mengurangkan bilangan kotak input.

Pelaksanaan kod:

Pertama, anda perlu memperkenalkan fail perpustakaan jquery:

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

Seterusnya, tambahkan kotak input dan dua butang untuk menambah dan mengurangkan nombor.

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

Kemudian, dalam kod Javascript, kita boleh mendapatkan kotak input dan elemen butang yang ditakrifkan di atas melalui pemilih jquery dan menambah pendengar acara.

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

Analisis kod:

Pertama, kami menggunakan pemilih jquery untuk mendapatkan kotak input dan elemen butang dan menyimpannya ke pembolehubah.

Seterusnya, kami menambah pendengar acara klik untuk mendengar acara klik butang.

Dalam acara klik butang, kami menggunakan kaedah val() untuk mendapatkan nilai dalam kotak input dan menukarnya kepada jenis integer melalui kaedah parseInt().

Dalam peristiwa klik butang tambah, kami meningkatkan nilainya sebanyak 1 dan menggunakan kaedah val() untuk menghantar nilai baharu ke kotak input.

Dalam peristiwa klik butang kurangkan, kami mula-mula menentukan sama ada nilai kotak input lebih besar daripada 1, dan jika ya, kurangkan nilainya sebanyak 1.

Ringkasan:

Melalui kod di atas, kita boleh melaksanakan fungsi mudah untuk menambah dan mengurangkan bilangan kotak input. Selain itu, kami juga boleh melaksanakan lebih banyak fungsi melalui kod yang serupa, seperti mengehadkan nilai maksimum dan minimum kotak input. jquery ialah perpustakaan javascript yang berkuasa yang menyediakan banyak kaedah dan fungsi praktikal yang boleh memudahkan kerja pembangunan kami. Oleh itu, pembelajaran dan penguasaan jquery sangat diperlukan untuk pembangun web.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan peningkatan dan penurunan fungsi nombor kotak input dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!