3

今日、jQueryスピナータイプのものを作成しようとしています。誰かがこのコードを教えてくれました。これにより、ボタンのクリックでテキストフィールドの値が上下します。素晴らしい。しかし、値が0〜ゼロの場合に.descボタンを無効にするにはどうしますか。PHPでは、<= 0の場合、これなどは非常に簡単ですが、jQueryはわかりません。

また、順序付けられていないhtmlリスト、つまりul liを上下に移動するためにどのように使用できるかについてのアイデアはありますか？

$(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" />
4

4 に答える 4

2

これが私のコードです、

$(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でスタイル設定できます。

これは最適化されたコードではありませんが、要件に従って機能させる方法を理解できるはずです。

于 2010-01-14T14:56:12.647 に答える
1

ええと、jQueryはまだjavascriptなので、使ってみませんか

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

つまり、javascriptにはif'があります。私があなたを正しく理解していれば

于 2010-01-14T14:42:27.993 に答える
0

コードはボタンや入力要素の代わりに画像を使用しているため、実際に無効にすることはできません。最も簡単な方法は、それを非表示にすることです。

$(":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');
    }
于 2010-01-14T14:42:48.510 に答える
0

スピナーからのインクリメントとデクリメントを処理するために別々の関数を使用します。無効化はフォーム要素でのみ機能しますが、画像を使用してスピナーコントロールを表しているため、それらを呼び出すか、.hide()およびの呼び出しで.show()アクションをスキップできます。incrementdecrement

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");
}

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

于 2010-01-14T14:58:25.077 に答える