jquery에서 입력 상자 번호의 증가 및 감소 기능을 구현하는 방법

웹 개발에서는 장바구니 갯수, 상품 갯수 등 입력창의 숫자 증가, 감소 기능을 자주 사용합니다. 이번 글에서는 jquery를 사용하여 입력 상자의 수를 늘리거나 줄이는 방법을 소개합니다.

코드 구현:

먼저 jquery 라이브러리 파일을 도입해야 합니다:

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

다음으로 입력 상자와 숫자 증가 및 감소를 위한 두 개의 버튼을 추가합니다.

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

그런 다음 Javascript 코드에서 jquery 선택기를 통해 위에서 정의한 입력 상자와 버튼 요소를 가져오고 이벤트 리스너를 추가할 수 있습니다.

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

코드 분석:

먼저 jquery 선택기를 사용하여 입력 상자와 버튼 요소를 가져와 변수에 저장합니다.

다음으로 버튼 클릭 이벤트를 수신하는 클릭 이벤트 리스너를 추가합니다.

버튼 클릭 이벤트에서는 val() 메서드를 사용하여 입력 상자의 값을 가져오고 이를 parsInt() 메서드를 통해 정수형으로 변환합니다.

추가 버튼의 클릭 이벤트에서는 해당 값을 1만큼 늘리고 val() 메서드를 사용하여 새 값을 입력 상자에 전달합니다.

축소 버튼의 클릭 이벤트에서는 먼저 입력 상자의 값이 1보다 큰지 확인하고, 그렇다면 그 값을 1만큼 감소시킵니다.

요약:

위의 코드를 통해, 입력창 번호를 늘리거나 줄이는 간단한 함수를 구현할 수 있습니다. 또한 입력 상자의 최대값과 최소값을 제한하는 등 유사한 코드를 통해 더 많은 기능을 구현할 수도 있습니다. jquery는 개발 작업을 크게 단순화할 수 있는 많은 실용적인 방법과 기능을 제공하는 강력한 자바스크립트 라이브러리입니다. 따라서 웹 개발자에게는 jquery를 배우고 마스터하는 것이 매우 필요합니다.

위 내용은 jquery에서 입력 상자 번호의 증가 및 감소 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!