not bad 한 개발

jQuery - 인원 수 제한 버튼 만들기 본문

Web/jQuery

jQuery - 인원 수 제한 버튼 만들기

leebean 2021. 12. 30. 22:27

이번에는 호텔 혹은 예약 사이트에서 자주 볼 수 있는 최대 인원 수 제한 기능을 만들어 보겠습니다. 이 기능은 기존의 무료 템플릿 에서 기능을 따와 어떤 프로젝트에서든 구현이 가능하도록 제작하였습니다.

(이 기능은 bootstrap 4을 포함하기 때문에 구현할 시 bootstrap 4 버전을 사용하시기 바랍니다.)

https://themewagon.com/themes/free-bootstrap-4-html5-responsive-hotel-website-template-hotel/

 

Hotel - Free Bootstrap 4 HTML5 Responsive Hotel Website Template

Hotel is a free Bootstrap 4 HTML5 responsive hotel website template. Features like hero header, drop-down menu, booking form, call to action button, testimonials are bundled with the package. Flexible and easily customizable code will allow you to customiz

themewagon.com

 

Adult, Children, Rooms 선택 부분에 있는 기능입니다.

github link : https://github.com/delight-HK3/people_select

 

GitHub - delight-HK3/people_select

Contribute to delight-HK3/people_select development by creating an account on GitHub.

github.com

 

HTML 

<html>
    <head>
    	<meta charset="utf-8">
        <!-- bootstrap 4.5 css -->
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/bootstrap.min.css">
        
        <!-- people_select css -->
        <link rel="stylesheet" href="/css/people_select.css">
        
        <!-- bootstrap 4.5 js -->
        <script src="/js/jquery-3.6.0.js"></script>
        <script src="/js/bootstrap.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        
        <!-- people_select js -->
        <script src="/js/people_select.js"></script>
    </head>
    <body>
        <div class="pro-qty row" style="margin-left:10px">
            <input type="text" value="1" readonly="readonly">
        </div>
    </body>
</html>

 

JQuery

$(document).ready(function(){ 
    var proQty = $('.pro-qty'); // HTML class 이름을 proQty 변수로 저장시킵니다.
    proQty.prepend('<div class="dec qtybtn">-</div>'); // pro-qty 클래스 뒤에 - 버튼 을 출력합니다.
    proQty.append('<div class="inc qtybtn">+</div>'); // pro-qty 클래스 앞에 + 버튼 을 출력합니다.
    proQty.on('click', '.qtybtn', function () { // qtybtn 클래스 가 있는 부분을 클릭했을 때 동작합니다.
        var $button = $(this); // 현재 있는 qtybtn의 속성 을 저장합니다.
        var oldValue = $button.parent().find('input').val(); 
        // qtybtn 의 부모중 input 태그의 value 값을 저장합니다.
        if ($button.hasClass('inc')) { // inc 속성을 가지고 있는 경우
            if(oldValue > 1){ // 2일 경우 더이상 증가하지 않고 리턴합니다.
                return;
            }
            var newVal = parseFloat(oldValue) + 1; // 문자형태인 oldValue를 실수로 변경하고 1을 더한 후 저장합니다.
        } 
        else {
            if (oldValue > 0) { 
                var newVal = parseFloat(oldValue) - 1;
            } 
            else { // 0일 경우 더이상 감소하지 않고 리턴합니다.
                newVal = 0;
            }
        }
        $button.parent().find('input').val(newVal);  
        // input 태그에 newVal값을 저장합니다.
    });
});

 

CSS

.pro-qty { /* pro-qty 클래스가 들어가는 태그에 적용되는 CSS  */
  	background: transparent;
  	border-radius: 0px;
  	font-size: 13px;
  	line-height: 38px;
  	color: #777777;
  	z-index: 0;
}
.pro-qty input{ /* pro-qty 클래스안에있는 input 태그에 적용되는 CSS  */
  	border: 1px solid #2b3146;
  	background: transparent;
  	font-size: 13px;
  	width: 60px;
 	text-align: center;
  	color: #ffffff;
}
.pro-qty div{ /* pro-qty 클래스안에있는 div 태그에 적용되는 CSS  */
	border: 1px solid #2b3146;
	width: 30px;
	text-align: center;
	cursor: pointer;
	color: white;
	font-size: 20px;
	letter-spacing: 0.4px;
}

 

저작자표시

'Web > jQuery' 카테고리의 다른 글

jQuery - 일정 시간이 지나면 css 변환  (0) 2022.04.07
jQuery - 최소 입력타수 기능  (0) 2021.12.30
jQuery - 최대 입력타수 기능  (0) 2021.12.30
jQuery - datepicker 디자인 바꾸기  (0) 2021.12.29
jQuery - datepicker 달력구현  (0) 2021.12.29
'Web/jQuery' Related Articles more
Comments