JQuery Spinner Typ Ding

Question

Ich versuche heute früher ein JQuery Spinner -Typ zu erstellen. Jemand hat mir diesen Code gegeben, mit dem das Textfeldwert auf den Schaltflächenklicks nach oben/unten erhöht wird. Fantastisch. Aber was tun Sie, um die .desc -Taste zu deaktivieren, wenn der Wert 0 - Null ist. In PHP sehr einfach, wenn wenn <= 0 dann usw. ... aber ich kenne JQuery nicht ..

Auch irgendwelche Ideen, wie es verwendet werden kann, um eine ungeordnete HTML -Liste nach oben/unten zu bewegen, dh 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);
        });  
    });
});

Dies verwendet eine Form:

<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

Hier ist mein Code,

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

Das Bild '.Dec' hört auf, abzubauen, da der Wert des Textelements 0 erreicht.

Es wird empfohlen, Tasten für diesen Zweck zu verwenden, und sie können mit CSS gestylt werden, um nach Bedarf zu erscheinen.

Dies ist nicht der optimierte Code, sondern sollte Ihnen eine Vorstellung davon geben, wie er nach Ihren Anforderungen funktioniert.

Answer 2

Uhm JQuery ist immer noch JavaScript. Warum benutzt du also nicht

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

Ich meine, JavaScript hat if's. Wenn ich dich richtig verstanden habe

Answer 3

Da der Code ein Bild anstelle eines Schaltfläche oder Eingabeelements verwendet, können Sie es nicht wirklich deaktivieren. Am einfachsten wäre es, es zu verbergen, was wäre:

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

Wenn Sie die Schaltfläche "" Taste "in ein Eingangs- oder Schaltflächenelement ändern, können Sie den Funktionscode in Folgendes ändern:

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

Answer 4

Verwenden Sie separate Funktionen, um das Inkrement und die Abnahme eines Spinners zu verarbeiten. Die Deaktivierung funktioniert nur auf Formularelementen. Da Sie jedoch die Spinner -Steuerelemente mithilfe von Bildern darstellen .hide() und .show() auf diese oder überspringen Sie die Aktion in den Anrufen zu increment und 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);
});

Sie können diesen Spinner verwenden, um eine ungeordnete Liste nach oben oder herunterzugehen, müssen jedoch die aktuelle Position in der Liste im Auge behalten. Das decrement Die Funktion kümmert sich bereits um nicht unter 0. Die Inkremente muss auch deaktiviert werden, wenn Sie am letzten Element in der Liste sind. So etwas sollte funktionieren:

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

Natürlich müssen diese erneut aktiviert werden, wenn sich der Wert erneut ändert. Aber ich bin sicher, dass Sie das tun können.