jQueryのスピナー型のもの

Question

私は今日早くjQueryのスピナー型のものを作成しようとしている誰かが私にボタンのクリックでアップ/ダウン、テキストフィールドの値を増加させ、このコードを与えました。ファンタスティック。ゼロ - 値が0である場合しかし、あなたは.descボタンを無効にするには何をしますか。 PHPで<= 0これ等の場合であれば非常に簡単...しかし、私はjQueryのを知らない..

また、任意のアイデアすなわち、UL李順不同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" />

Answer 1

ここに私のコードは、

$(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でスタイルすることができます。

これは、最適化されたコードではありませんが、あなたにそれがウルの必要条件に従って作業を取得する方法のアイデアを与える必要があります。

Answer 2

jQueryのオムはまだjavascriptのある、なぜあなたが使用していない

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

私が意味する、Javascriptをif年代を持っています。 私が正しくあなたを理解している場合

Answer 3

のコードではなく、ボタンや入力要素の画像を使用しているので、あなたは本当にそれを無効にすることはできません。一番簡単な方法は次のようになり、それを隠すためになります：

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

Answer 4

スピナーからインクリメント及びデクリメントを処理するために別々の機能を使用しました。無効化は、唯一のフォーム要素上で動作しますが、画像を使用してスピンコントロールを表しているので、あなたはそれらの上.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");
}

もちろん、これらの値が再び変化したときに再度有効にする必要があります。しかし、私は、あなたがそれを行うことができると確信しています。