JavaScript 증분 및 감소 버튼

Question

기본적으로 증가 및 감소 버튼을 수행하려고합니다. 텍스트 값이 24에 도달하면 증가를 멈춰야합니다.

<input type='button' value='-' class='qtyminus' field='quantity' /> 
<input type='text' name='quantity' value='0' class='qty' /> 
<input type='button' value='+' class='qtyplus' field='quantity' /> 

내 CSS : 다음은 HTML 코드입니다

.qty { 
    width: 40px; 
    height: 25px; 
    text-align: center; 
} 
input.qtyplus { 
    width:25px; 
    height:25px; 
} 
input.qtyminus { 
    width:25px; 
    height:25px; 
} 

그리고 내 자바 스크립트 :

jQuery(document).ready(function(){ 
    // This button will increment the value 
    $('.qtyplus').click(function(e){ 
     // Stop acting like a button 
     e.preventDefault(); 
     // Get the field name 
     fieldName = $(this).attr('field'); 
     // Get its current value 
     var currentVal = parseInt($('input[name='+fieldName+']').val()); 
     // If is not undefined 
     if (!isNaN(currentVal)) { 
      // Increment 
      $('input[name='+fieldName+']').val(currentVal + 1); 
     } else { 
      // Otherwise put a 0 there 
      $('input[name='+fieldName+']').val(0); 
     } 
    }); 
    // This button will decrement the value till 0 
    $(".qtyminus").click(function(e) { 
     // Stop acting like a button 
     e.preventDefault(); 
     // Get the field name 
     fieldName = $(this).attr('field'); 
     // Get its current value 
     var currentVal = parseInt($('input[name='+fieldName+']').val()); 
     // If it isn't undefined or its greater than 0 
     if (!isNaN(currentVal) && currentVal > 0) { 
      // Decrement one 
      $('input[name='+fieldName+']').val(currentVal - 1); 
     } else { 
      // Otherwise put a 0 there 
      $('input[name='+fieldName+']').val(0); 
     } 
    }); 
}); 

여기 내 fiddle입니다. 나는이 바이올린을 연구함으로써 얻는다. 나는 거기에 더하기 버튼과 같은 전체를 스타일링하는 방법이 있는지 궁금하다. 그 다음에는 텍스트 상자와 마이너스 버튼이 뒤 따른다.

또한 JavaScript로 플러스 마이너스 한도를 설정할 수있는 방법이 있습니까? if ekse 문을 설정했기 때문에 작동하지 않습니다.

Answer 1

"if (! isNaN ..."부분이 이미 사실이므로 "else if"부분에 도달하지 않은 코드에서 VoronoiPotato가 제안한대로 비교를 다른 곳으로 이동해야합니다 .

if (!isNaN(currentVal)) { 
     if (currentVal < 24) { 
      // Increment 
      $('input[name='+fieldName+']').val(currentVal + 1); 
     } 
    } else { 
     // Otherwise put a 0 there 
     $('input[name='+fieldName+']').val(0); 
    } 

Answer 2

넣어 당신의 if (!isNaN(currentVal) && currentVal > 0)

if(currentVal === 24){ return; }

편집 내부 코드 : 예를 들어 이 방법으로 당신의 현재 값 입력 상자 (24)는 FUNC를 종료 할 경우 .

Answer 3

나는 당신의 jsFiddle ..

http://jsfiddle.net/puJ6G/847/

그것은 당신의 문에 편집 ..하지만 24에 마지막 숫자를 중지하거나 수 24에 도달 할 경우이 켜집니다 원한다면 난 그냥 궁금 0. 코드에서

여기 그냥 24

if (currentVal == 24) { 
      $('input[name='+fieldName+']').val(currentVal); 
     } 
     else if (!isNaN(currentVal)) { 
      // Increment 
      $('input[name='+fieldName+']').val(currentVal + 1); 
     } 
     else { 
      // Otherwise put a 0 there 
      $('input[name='+fieldName+']').val(0); 
     } 

에 중지하지만 다시 0 사용이에 24을 설정 할 것입니다 것입니다.

if (!isNaN(currentVal) && && currentVal<24) { 
     // Increment 
$('input[name='+fieldName+']').val(currentVal + 1); 
} 
else { 
// Otherwise put a 0 there 
$('input[name='+fieldName+']').val(0); 
} 

내가 내부