Buduję wybierak wielokrotnego ilości dla mojego sklepu. Obraz poniżej:

enter image description here

Na stronie cena aktualizacji produktu w oparciu o dodaną ilość. 10 Produkty = 10% zniżki itp. Chciałbym móc wyświetlić tę zmianę, a gdy użytkownik edytuje dowolny z skrzynek wejściowych w selektorze ilości.

Pola wejściowe są tak budowane:

<div data-value="S" data-varientid="8195426353207" class="swatch-element swatch-element-2 size s available">

   <input id="swatch-0-s" data-variant-id="variant_8195426353207" type="checkbox" name="option-0" value="S">

   <label for="swatch-0-s">
                  S
      <img class="crossed-out" src="//cdn.shopify.com/s/files/1/0020/2188/3959/t/2/assets/soldout.png?5180939831627851747" alt="">
   </label>

   <input id="qty" name="quantity" class="swatchinput" placeholder="0" value="0" type="text">

</div>

Jestem w stanie oglądać skrzynki wejściowe zmiany, wykonując poniższe:

  var qty = $('.swatchinput');

  $('.swatchinput').on('paste keyup', function() {
    console.log(qty);
  });

Zwraca to jednak informacje o elemencie, a nie zawartości. Nie jestem również pewny najlepszego sposobu, aby dodać zawartość różnych pól wejściowych razem, aby osiągnąć całkowitą ilość.

-2
Sam Johnson 4 czerwiec 2018, 17:31

3 odpowiedzi

Najlepsza odpowiedź

Możesz również użyć tablicy zmniejszać metodę, aby to zrobić. Wybierz wszystkie wejścia, zdobądź tablicę, a następnie zmniejszyć ich wartości do sumy.

var total = $('.swatchinput').get().reduce(function(total, input){
  return total + parseInt(input.value || '0');
}, 0);

console.log(total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="quantity" class="swatchinput" placeholder="0" value="1" type="text">
<input name="quantity" class="swatchinput" placeholder="0" value="2" type="text">
<input name="quantity" class="swatchinput" placeholder="0" value="3" type="text">
<input name="quantity" class="swatchinput" placeholder="0" value="4" type="text">
1
Taplar 4 czerwiec 2018, 14:40

Coś takiego?

var total = 0;

$('.switchinput').each(function(){
    total += $(this).val();
});

console.log(total);

Aby uzyskać wartość elementu w jQuery, użyj .val ():

http://api.jquery.com/val/

. Pozostały pętle za pomocą każdego dopasowanego elementu i działa funkcję na tym elemencie (dostępnym przez "to")

http://api.jquery.com/each/

1
Michael Beeson 4 czerwiec 2018, 14:35

To musi być

 var qty = $('.swatchinput').val();

Nie

var qty = $('.swatchinput');

Jak na twoje drugie pytanie,

Pętla każdego z tych wejść, uzyskanie wartości, a następnie dodaj je z całkowitą. Zainicjuj całość poza pętlą, więc nie nadpisuje go.

1
clearshot66 4 czerwiec 2018, 14:33