0
votes

jQuery - Fonction de mise à jour sur le document prêt ()

Comment mettre à jour ma fonction (le total et la quantité disponible) lorsque j'ai une valeur saisie dans input ? La fonction permet aux boutons de changer l ' entrée mais rien ne se passe lorsque j'entre une valeur dans le HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='products'>
  <div class="item">
    <h4 class="count">350</h4>
    <span class='cost'>500</span>
    <input type='text' autocomplete="off" placeholder='amount...' name='quantity' value='1' class='qty' />
    <input type='button' value="-" class='qty-button qtyminus' field='quantity' />
    <input type='button' value="+" class='qty-button qtyplus' field='quantity' />
    <div class="total"></div>
  </div>
</div>

.item {
  border: 1px solid;
  width: 150px;
}

function updateCount(t, n) {
  var e = t
    .closest(".item")
    .find(".cost")
    .text()
    .replace("$", ""),
    a = t.closest(".item").find(".total");
  $(a).hide(),
    "0" !== $(n).val() && "" !== $(n).val() ?
    ($(a).show(),
      t.text(parseInt(t.data("val")) - (parseInt(n.val()) || 0)),
      a.text(e * (parseInt(n.val()) || 0)),
      a.closest(".total").prepend("$")) :
    $(a).hide();
}

$(".count").each(function() {
    $(this).data("val", $(this).text());
  }),
  $(document).on("click", ".qtyplus", function(t) {
    if (
      $(this)
      .closest(".item")
      .find(".count")
      .data("val") >=
      Number(
        $(this)
        .closest(".item")
        .find("input[name='quantity']")
        .val()
      ) +
      1
    ) {
      t.preventDefault(),
        ($parent = $(this).closest(".item")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      isNaN(n) ?
        $parent.find("input[name='" + fieldName + "']").val(1) :
        $parent.find("input[name='" + fieldName + "']").val(n + 1),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name='" + fieldName + "']")
        );
    }
  }),
  $(document).on("click", ".qtyminus", function(t) {
    if (
      Number(
        $(this)
        .closest(".item")
        .find("input[name='quantity']")
        .val()
      ) -
      1 >
      0
    ) {
      t.preventDefault(),
        ($parent = $(this).closest(".item")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      !isNaN(n) && 0 < n ?
        $parent.find("input[name=" + fieldName + "]").val(n - 1) :
        $parent.find("input[name=" + fieldName + "]").val(0),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name=" + fieldName + "]")
        );
    }
  });

jquery html

0 commentaires

4 Réponses :

0
votes

Cela aidera

<input type="number" id="a"/>a
<div id="s">23</div>

$("#a").change(()=>{
var e=parseInt($("#s").text());
var f=parseInt($("#a").val());
alert((e+f));
$("#s").text(e+f);
})

Il prend la valeur du div et de la zone de saisie et les ajoute. Après l'ajout, il remplace l'ancienne valeur du div par la nouvelle.

0 commentaires

0
votes

j'ai ajouté script sur entrée la valeur que tout calcul est modifié strong>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='products'>
  <div class="item">
    <h4 class="count">350</h4>
    <span class='cost'>500</span>
    <input type='text' autocomplete="off" placeholder='amount...' name='quantity' value='1' class='qty' />
    <input type='button' value="-" class='qty-button qtyminus' field='quantity' />
    <input type='button' value="+" class='qty-button qtyplus' field='quantity' />
    <div class="total"></div>
  </div>
</div>

0 commentaires

0
votes

Vous pouvez utiliser l'événement .keypress () de JQuery.

$(document).on("keypress", ".qty", function(t) {
  ...
}

1 commentaires

J'en ai besoin pour mettre à jour les valeurs pré-saisies dans le HTML

0
votes

ajouter l'id

  $(document).on('keyup','.currentQty',function(){
    $('.count').html(350-$(this).val());
 $('.total').html("$"+500*$(this).val());
  });

à js ajouter

<input type='text' id='currentQty' autocomplete="off" placeholder='amount...' name='quantity' value='1' class='qty' />

Amusez-vous

0 commentaires