Zwiększanie i zmniejszanie wartości wejściowych przy użyciu jquery

Muszę zwiększać i zmniejszać wartość wejść po kliknięciu przycisków + i -, ale wydaje się, że nie działa. Dostałem kod z tego posta: How to increase the value of a quantity field with jQuery? Po kliknięciu przycisku dodawania wstawiłem instrukcję console.log dla celów debugowania i, co zaskakujące, otrzymuję wartość 3, mimo że kliknąłem przycisk o identyfikatorze add1. Naprawdę to doceniam, jeśli mógłbyś wskazać mi błąd, dzięki!Zwiększanie i zmniejszanie wartości wejściowych przy użyciu jquery

HTML:

<body> 
    <p> 
     <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20"> 
     <input id="qty1" type="text" value="1"> 
     <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20"> 
    </p> 

    <p> 
     <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20"> 
     <input id="qty2" type="text" value="1"> 
     <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20"> 
    </p> 
</body>

jQuery:

$(function() { 
    var numButtons = 2; 
    //console.log(typeof(numButtons)); 
    //console.log(numButtons); 
    for (var i = 1; i <= numButtons; i++) { 

     $("#add" + i).click(function() { 
      console.log(i); 
      var currentVal = parseInt($("#qty" + i).val()); 
      //console.log(currentVal); 
      if (!isNaN(currentVal)) { 
       $("#qty" + i).val(currentVal + 1); 
      } 
     }); 

     $("#minus" + i).click(function() { 
      var currentVal = parseInt($("#qty" + i).val()); 
      if (!isNaN(currentVal) && currentVal > 0) { 
       $("#qty" + i).val(currentVal - 1); 
      } 
     }); 
    } 
});

jsfiddle - http://jsfiddle.net/hMS6Y/

Źródło

2013-10-02 Faizal

czemu iteracji nad numButtons? Dlaczego po prostu nie masz programów obsługi zdarzeń? –

Hmm, uwzględni to. Muszę wygenerować wiele wejść z różnymi identyfikatorami, dlatego pomyślałem, że pętla for ma sens. Czy można to naprawić? – Faizal

Twoja zmienna i znajduje się w stanie globalnym, a po zakończeniu pętli for jej wartość wynosi 3, a funkcje przekazywane do zdarzenia kliknięcia mają dostęp do wartości i, gdy są wyzwalane w przypadku zdarzenia kliknięcia. Tak więc wartość i tych funkcji będzie wynosiła 3. –

Spróbuj to w prosty sposób, używając class,

HTML

<body> 
    <p> 
     <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus"/> 
     <input id="qty1" type="text" value="1" class="qty"/> 
      <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/> 
    </p> 
    <p> 
     <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus"/> 
     <input id="qty2" type="text" value="1" class="qty"/> 
     <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/> 
    </p> 
</body>

SCRIPT

$(function() { 
    $('.add').on('click',function(){ 
     var $qty=$(this).closest('p').find('.qty'); 
     var currentVal = parseInt($qty.val()); 
     if (!isNaN(currentVal)) { 
      $qty.val(currentVal + 1); 
     } 
    }); 
    $('.minus').on('click',function(){ 
     var $qty=$(this).closest('p').find('.qty'); 
     var currentVal = parseInt($qty.val()); 
     if (!isNaN(currentVal) && currentVal > 0) { 
      $qty.val(currentVal - 1); 
     } 
    }); 
});

Fiddle:http://jsfiddle.net/hMS6Y/2/

Alternatywnie można krótki kod jak,

$(function() { 
 
    $('.minus,.add').on('click', function() { 
 
    var $qty = $(this).closest('p').find('.qty'), 
 
     currentVal = parseInt($qty.val()), 
 
     isAdd = $(this).hasClass('add'); 
 
    !isNaN(currentVal) && $qty.val(
 
     isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal) 
 
    ); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<p> 
 
    <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus" /> 
 
    <input id="qty1" type="text" value="1" class="qty" /> 
 
    <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" /> 
 
</p> 
 
<p> 
 
    <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus" /> 
 
    <input id="qty2" type="text" value="1" class="qty" /> 
 
    <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" /> 
 
</p>

Źródło

2013-10-02 04:20:45

Nie wiem, dlaczego zostałeś poddany pod głosowanie, ale zdecydowanie uważam, że najlepsze jest rozwiązanie "klasy". –

Dzięki! Po prostu chcę wiedzieć, dlaczego umieścić $ przed qty w tym zestawieniu var $ qty = $ (this) .closest ('p'). Find ('. Qty'); – Faizal

@MalcolmX '$ qty' jest po prostu' elementem' możesz go użyć po prostu 'qty' ale odróżnić, że jest to' element jquery', '' '' '' '' '' '' ''. –

zmienna i ma charakter globalny w przypadku będzie to faktycznie pracują # ADD3, # minus3. Tutaj w kodzie możesz wypróbować to -

$(function() { 
    var numButtons = 2; 
    //console.log(typeof(numButtons)); 
    //console.log(numButtons); 
    for (var i = 1; i <= numButtons; i++) { 
     var t = i; //Now t is local 
     $("#add" + t).click(function() { 
      console.log(t); 
      var currentVal = parseInt($("#qty" + t).val()); 
      //console.log(currentVal); 
      if (!isNaN(currentVal)) { 
       $("#qty" + t).val(currentVal + 1); 
      } 
     }); 

     $("#minus" + t).click(function() { 
      var currentVal = parseInt($("#qty" + t).val()); 
      if (!isNaN(currentVal) && currentVal > 0) { 
       $("#qty" + t).val(currentVal - 1); 
      } 
     }); 
    } 
});

Mam nadzieję, że to pomoże.

Źródło

2013-10-02 04:18:26 Ritesh

Ah Widzę, jak mogę sprawić, żeby działało to dla # add1 i # add2? – Faizal

To nie zadziała. Twoja zmienna "t" nadal będzie miała dostęp do wartości "i", a skończy 3 jako ze względu na powiązanie czasu wykonywania. –

w pętli for i wartości stają 3

DEMO

$(function() { 

    $("#add1").click(function() { 
      add(1); 
    }); 

    $("#minus1").click(function() { 
     minus(1); 
    }); 

$("#add2").click(function() { 
      add(2); 
    }); 

    $("#minus2").click(function() { 
     minus(2); 
    }); 
}); 

function add(i){ 
var currentVal = parseInt($("#qty" + i).val()); 

     if (!isNaN(currentVal)) { 
      $("#qty" + i).val(currentVal + 1); 
     } 
} 

function minus(i){ 
    var currentVal = parseInt($("#qty" + i).val()); 
     if (!isNaN(currentVal) && currentVal > 0) { 
      $("#qty" + i).val(currentVal - 1); 
     } 
}

Źródło

2013-10-02 04:20:17

Problem pod ręką polega na tym, że wartość i wynosi 3 do czasu zakończenia pętli. To, co chcesz zrobić, to zapisać wartość każdej iteracji, aby po uruchomieniu zdarzenia click nadal utrzymywała poprawną wartość (wartość w momencie połączenia zdarzenia). Jednym ze sposobów, aby to zrobić, jest tzw. Zamknięcie. Zamknięcia zasadniczo zamykają się wokół wartości i zapisują wywołanie funkcji z wartością używaną do późniejszego wywołania. Jednym ze sposobów osiągnięcia tego jest fabryka funkcji.

function add(value){ 
    console.log(value); 
    var currentVal = parseInt($("#qty" + value).val());  
    if (!isNaN(currentVal)) { 
     $("#qty" + value).val(currentVal + 1); 
    } 
}; 

function addClosure(value){ 
    return function(){ 
     add(value); 
    }; 
};

W tym momencie wszystko, co musisz zrobić, to zmienić zdarzenie click następująco:

$("#add" + i).click(addClosure(i));

JSFiddle: http://jsfiddle.net/infiniteloops/y9huk/

MDN Zamknięcia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

Źródło

2013-10-02 04:29:16

kod działa.

<body> 
    <div id='placeholder'> 
    <p> 
     <img src="http://i.imgur.com/yOadS1c.png" act='min' id="1" width="20" height="20" /> 
     <input id="qty1" type="text" value="1"> 
     <img src="http://i.imgur.com/98cvZnj.png" act='add' id="1" width="20" height="20" /> 
    </p> 
    <p> 
     <img src="http://i.imgur.com/yOadS1c.png" act='min' id="2" width="20" height="20" /> 
     <input id="qty2" type="text" value="1"> 
     <img src="http://i.imgur.com/98cvZnj.png" act='add' id="2" width="20" height="20" /> 
    </p> 
    </div> 
</body> 



$(function() { 
     $('#placeholder img').each(function(){ 
      $(this).click(function(){ 

      $action = $(this).attr('act');   
      $id = $(this).attr('id'); 
      $val = parseInt($('#qty'+$id).val()); 

      if($action == 'add'){ 
       $val = $val + 1; 
      } else { 
       if($val > 0){ 
        $val = $val - 1;  
       } 
      } 
      $('#qty'+$id).val($val); 

      }); 

     }); 
    });

Źródło

2013-10-02 04:40:58

<div class="box-qty"> 
<a href="javascript:void(0);" class="quantity-minus">-</a> 
<input type="text" name="p_quantity" id="qnt" class="quantity" value="1"> 
<a href="javascript:void(0);" class="quantity-plus">+</a> 
</div> 

<script> 
$(".quantity-plus").click(function(){  
$("#qnt").val(Number($("#qnt").val())+1); 
}); 

$(".quantity-minus").click(function(){ 
if($("#qnt").val()>1) 
$("#qnt").val(Number($("#qnt").val())-1);  
}); 
<script>

Źródło

2016-10-05 22:44:31 MRRaja

Zwiększanie i zmniejszanie wartości wejściowych przy użyciu jquery

Odpowiedz

Powiązane problemy