jQuery는 장바구니 숫자의 덧셈과 뺄셈 효과를 구현합니다_jquery

온라인 쇼핑 주문을 제출할 때 일반적으로 웹페이지에 수량 선택 컨트롤이 있는데, 구매자가 구매할 품목 수를 선택해야 합니다. 개발자는 추가 등의 세부 조정 작업을 수행할 수 있도록 이 컨트롤을 만듭니다. 클릭만으로 뺄셈을 할 수 있습니다. 물론 조각 수를 직접 입력할 수도 있습니다. 이 기사에서는 스피너 디지털 스피너를 사용하여 디지털 덧셈 및 뺄셈 기능을 구현하는 몇 가지 일반적인 방법을 소개합니다.

좌우로 숫자 더하기, 빼기

예를 들어 JD.com에서는 현재 주문을 제출할 때 왼쪽과 오른쪽에 숫자를 더하고 빼는 효과를 사용하고 있습니다. 이 효과는 간단하고 조작하기 쉽습니다. jquery.spinner.js 플러그인을 사용하여 왼쪽과 오른쪽으로 숫자를 더하고 뺍니다. 호출 방법은 매우 간단합니다. 데모 예제 1을 참조하세요.

코드 복사 코드는 다음과 같습니다.

호출도 매우 간단합니다. 먼저 jquery 라이브러리 파일과 jquery.spinner.js를 로드한 후 다음 코드를 사용합니다.

코드 복사 코드는 다음과 같습니다.

$('.spinner').spinner()

부트스트랩 스타일, 오른쪽에 플러스와 마이너스

부트스트랩은 오랫동안 인기를 끌었고, 부트스트랩 스타일을 기반으로 한 다양한 애플리케이션이 있습니다. 최소값, 최대값을 설정할 수 있는 부트스트랩 기반의 디지털 덧셈 플러그인을 소개하겠습니다. , 증가 및 감소(단계 값), 숫자를 수동으로 입력합니다.

코드 복사 코드는 다음과 같습니다.

부트스트랩 관련 CSS, js 파일을 로딩한 후 페이지 효과를 직접 확인할 수 있습니다. 부트스트랩 기반 프로젝트인 경우 직접 호출할 수 있습니다. 데모 예시 2를 참조하세요
프로젝트 주소
https://github.com/xixilive/jquery-spinner
를 참조하여 관련 매개변수 설정을 볼 수도 있습니다.

jQuery UI 스타일, 오른쪽에 덧셈과 뺄셈
jQuery UI는 최소값, 최대값, 증가 및 감소(단계 값)를 설정하고 수동으로 숫자를 입력할 수 있는 숫자 덧셈 및 뺄셈 플러그인도 제공합니다. 데모 예시 3을 참조하세요

코드 복사

코드는 다음과 같습니다. 프로젝트에서 jquery ui를 사용하는 경우 jquery ui를 호출하여 숫자 더하기 및 빼기 기능을 구현할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

$("#spinner").spinner({ 최대:10, 최소:0, 단계:2 })

위 내용은 이 글에 설명된 내용의 전부입니다. jQuery를 마스터하는데 도움이 되길 바랍니다.