문제

나는 오늘 일찍 jQuery 스피너 유형을 만들려고 노력하고 있습니다. 오늘 누군가가 나에게 버튼 클릭의 텍스트 필드 값을 위/아래로 증가시키는이 코드를 나에게 주었다. 환상적입니다. 그러나 값이 0 -Zero 인 경우 .desc 버튼을 비활성화하려면 어떻게합니까? PHP에서 <= 0이면 매우 쉽게 <= 0이지만 ... jQuery를 모릅니다 ..

또한 비정규 HTML 목록을 위/아래로 이동하는 데 어떻게 사용될 수 있는지 아이디어가 있습니까?

$(document).ready(function() 
{   
    $(function()
    {
        $(".inc").click(function() 
        { 
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) + 1);
        }); 

        $(".dec").click(function()
        {      
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) - 1);
        });  
    });
});

이것은 양식을 사용합니다.

<input type="text" name="qty" value="0" />
<img src="img/up.png" class="inc" width="20px" height="9px" alt="Increase" title="increase" />
<img src="img/down.png" class="dec" width="20px" height="9px" alt="Decrease" title="Decrease" />
도움이 되었습니까?

해결책

여기 내 코드가 있습니다.

$(document).ready(function () {
  var textElem = $(":text[name='qty']"),
      getTextVal = function() {
        var val = parseInt(textElem.val(), 10);
        return isNaN(val) ? 0 : val;
      };

  $(".inc").click(function () {
      textElem.val(getTextVal() + 1);
  });

  $(".dec").click(function(){
      if( getTextVal() == 0) {
         return false;
      }

      textElem.val(getTextVal() - 1);
  });
});

이미지 '.dec'은 텍스트 요소의 값이 0에 도달함에 따라 감소를 중지하면 사용자가 전환을 알아 차릴 수 있도록 클래스 이름을 이미지에 동적으로 추가하고 제거 할 수 있습니다.

이 목적으로 버튼을 사용하는 것이 좋습니다. CSS와 함께 스타일링되어 필요에 따라 나타날 수 있습니다.

이것은 최적화 된 코드가 아니지만 요구 사항에 따라 작동하는 방법에 대한 아이디어를 제공해야합니다.

다른 팁

uhm jquery는 여전히 JavaScript이므로 사용하지 않겠습니까?

$(".dec")
    .click(
        function(){
            if(Number($(":text[name='qty']").val() > 0)
            {
                $(":text[name='qty']")
                    .val( Number($(":text[name='qty']").val()) - 1 
                );
            }
         }
     );

JavaScript가 있습니다 if'에스. 내가 당신을 올바르게 이해했다면

코드는 버튼 또는 입력 요소 대신 이미지를 사용하므로 실제로 비활성화 할 수 없습니다. 가장 쉬운 일은 그것을 숨기는 것입니다.

$(":text[name='qty']").change(function() {
    if($(this).val() <= 0) {
        $(".dec").hide();
    } else {
        $(".dec").show();
    }
}):

감소 "버튼"을 입력 또는 버튼 요소로 변경하면 기능 코드를 다음과 같이 변경할 수 있습니다.

    if($(this).val() <= 0) {
        $(".dec").attr('disabled','disabled');
    } else {
        $(".dec").removeAttr('disabled');
    }

별도의 기능을 사용하여 스피너의 증분 및 감소를 처리합니다. 비활성화는 폼 요소에서만 작동하지만 이미지를 사용하여 스피너 컨트롤을 나타내므로 호출 할 수 있습니다. .hide() 그리고 .show() 그것에 대해 increment 그리고 decrement.

function increment() {
    var textField = $(":text[name='qty']");
    var value = Number(textField.val()) + 1;
    textField.val(value);
}

function decrement() {
    var textField = $(":text[name='qty']");
    var value = Number(textField.val()) - 1;
    textField.val(value);
    if(value == 0) {
        $(".dec").attr("disable", "disable");
    }
}

$(document).ready(function() {
    $(".inc").click(increment);
    $(".dec").click(decrement);
});

이 스피너를 사용하여 반대되지 않은 목록을 오르 내릴 수 있지만 목록의 현재 위치를 추적해야합니다. 그만큼 decrement 기능은 이미 0 이하로 가지 않도록 처리합니다. 목록의 마지막 항목에있는 경우 증분을 비활성화해야합니다. 이와 같은 것이 효과가 있어야합니다.

if(current == $("#list > li").size() - 1) {
    $(".inc").attr("disable", "disable");
}

물론 값이 다시 변경되면 다시 활성화되어야합니다. 그러나 나는 당신이 그렇게 할 수 있다고 확신합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top