jquery如何實(shí)現(xiàn)輸入框數(shù)字的增加和減少功能

本篇內(nèi)容主要講解“jquery如何實(shí)現(xiàn)輸入框數(shù)字的增加和減少功能”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“jquery如何實(shí)現(xiàn)輸入框數(shù)字的增加和減少功能”吧!

代碼實(shí)現(xiàn)：

首先，需要引入jquery庫(kù)文件：

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

接著，添加一個(gè)輸入框和兩個(gè)按鈕，用于增加和減少數(shù)字。

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

然后，在Javascript代碼中，我們可以通過(guò)jquery選擇器獲取上面定義的輸入框和按鈕元素，并添加事件監(jiān)聽器。

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

代碼解析：

首先，我們使用jquery選擇器獲取輸入框和按鈕元素，并保存到變量中。

接著，我們通過(guò)添加click事件監(jiān)聽器來(lái)監(jiān)聽按鈕的點(diǎn)擊事件。

在按鈕點(diǎn)擊事件中，我們使用val()方法獲取輸入框中的數(shù)值，并通過(guò)parseInt()方法將其轉(zhuǎn)換為整數(shù)類型。

在增加按鈕的點(diǎn)擊事件中，我們將其值加1，并用val()方法將新值傳遞給輸入框。

在減少按鈕的點(diǎn)擊事件中，我們首先判斷輸入框的值是否大于1，如果是，則將其值減1。

到此，相信大家對(duì)“jquery如何實(shí)現(xiàn)輸入框數(shù)字的增加和減少功能”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！