jQuery incrémenter un ID et var on click

Question

J'essaye de faire un bouton qui incrémente en cliquant sur son ID et une variable. J'ai été capable de trouver du code sur StackOverflow qui augmente la valeur d'un champ de saisie mais je ne sais pas le changer à partir de là.

Voici le balisage:

<input type="text" name="qty" value="0" /> 
<p id="inc">Increase</p> 
<p id="dec">Decrease</p> 

Et jQuery

<script> 
$(document).ready(function() 
{ 
    $(function() 
    { 
     $("#inc").click(function() 
     { 
      $(":text[name='qty']").val(Number($(":text[name='qty']").val()) + 1); 
      $('#inc').addClass (Number + 1); // this one does not work 
      var incrementVar = (Number + 1); // this one also does not work 
     }); 

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

Cela augmente la val dans l'entrée, mais je ne peux pas le faire pour incrémenter le $ ('# inc) classe et le var incrementVar.

Que dois-je faire? Merci

Answer 1

var incrementVar = 0; 
$(function() { 
    $("#inc").click(function() { 
     var value = parseInt($(":text[name='qty']").val()) + 1; 
     $(":text[name='qty']").val(value); 
     $('#inc').addClass('a' + value); // I believe class names cannot start with a number 
     incrementVar = incrementVar + value; 
    }); 
}); 

Answer 2

Les noms de classe ne peuvent pas commencer par un nombre, see this discussion for details. Si vous préfixez votre classe .c1 dire, .c2, etc ... vous pouvez faire quelque chose comme ceci:

$(function() { 
    $("#inc").click(function() { 
    var num = $(":text[name='qty']").val(function(i, v) { 
        return Number(v) + 1; 
       }).val(); 
    $(this).addClass ('c' + num); 
    var incrementVar = num; 
    }); 

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

Une note plus: pas besoin de $(document).ready(function() { et $(function() { ceux-ci sont équivalents, dans l'emballage ou l'autre seul est très bien.

Answer 3

Pour le support du clavier supplémentaire (flèches haut/bas pour ajouter/soustractions) pour cette entrée, mon plugin Incrémenter pourrait être utile: http://sean-o.com/increment

Il suffit de télécharger et inclure le script, puis appelez avec une ligne de code:

$(":text[name='qty']").increment({ increment: 1 }); 

--SEAN O