1

tengo un problema, y basicamente es que me gustaria que una funcion se ejecutara solo en donde se haga click ya que el codigo html con sus class esta repetido en el site

$(function() {
  btnCompreAgora();
});
function btnCompreAgora() {
  $(".qtd-box .box-qtd .btn").click(function() {
    var $this = $(this);
    var $qtd = $('.qtd-box .box-qtd .qtd');
    var valor = parseInt($qtd.val());
    if ($this.hasClass('btn-mais')) {
      $qtd.val(valor + 1);
      changeUrl(valor + 1);
      var valueQty = $('.qtd-box .box-qtd .qtd').attr('value');
      var sss = $('.qtd-box .box-qtd .qtd').attr('value', valueQty.replace('qty=1', 'qty=' + parseInt($('.qtd-box .box-qtd .qtd').val())));
    }
  });
  function changeUrl(val) {
    myFunction
  };
}

Y en html

<div class="product-buy"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p">
    <div class="qtd-box">
      <div class="pull-left box-qtd">
        <button class="btn btn-menos"><span>‒</span></button>
        <input type="text" class="qtd" value="2" min="1">
        <button class="btn btn-mais"><span>+</span></button>
      </div>
    </div>
  </a>
  <div class="buy-button-wrap"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p">
    </a>
    <div class="btnComprarHover"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a><button type="button"><a title="ITALICO"
          href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a>
        <div class="buy-button-normal" id="3145" name="3145"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a><a class="buy-button-normal-a3145"
            href="https://www.hhhh.com/checkout/cart/add?sku=3145&amp;qty=1&amp;seller=1&amp;sc=1&amp;price=1400&amp;cv=CFE834FB1C376F743357FB9AC6859173_&amp;sc=1" title="Comprar">yas</a></div>
      </button></div>
  </div>
</div>

Lo que pasa es que el codigo html lo tengo en varios lugares en la pagina y quisiera que al sumar el valor y al ejecutar la funcion solo se refleje en el contenedor donde se hace click

1 respuesta 1

0

Al cargar la página solo asigna el evento a los botones y, dentro de la función, puedes usar $(this) para acceder al resto de elementos. Revisa los comentarios para saber qué se hace en cada paso y no dudes en preguntar si algo no quedó claro.

// Ejecutar cuando se cargue la página
$(function() {
  // Asignar evento a botones
  $(".qtd-box .box-qtd .btn").click(compreAgora);
});
function compreAgora() {
  // Elimina la siguiente línea, es solo para probar
  event.preventDefault();
  // Obtener padre closest('.qtd-box')
  // Desde ahí, se obtiene el input find('.qtd')
  let qtd = $(this).closest('.qtd-box').find('.qtd');
  // Obtener valor como entero
  let valor = parseInt($(qtd).val());
  // Incrementar?
  if($(this).hasClass('btn-mais')) {
      valor ++;
  } else if(valor > 1) {
      // No permitir llegar a cero
      valor --;
  } else {
      // Valor es cero, no se puede comprar
      event.preventDefault();
      return;
  }
  // Actualizar valor del campo
  $(qtd).val(valor);

  // Obtener enlace desde el div con clase buy-button-normal
  // Como tienes dos enlaces, se usa eq(1) para seleccionar el segundo
  let link = $(this).closest('.product-buy').find('div.buy-button-normal a').eq(1);

  // Obtener el destino del enlace
  let href = $(link).attr('href');
  // Modificar cantidad, se debe usar expresión regular para encontrar
  href = href.replace(/qty=[\d]*/, 'qty=' + valor);
  // Asignar nuevo destino a enlace
  $(link).attr('href', href);
  // Solo para comprobar
  console.log($(link).attr('href'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-buy"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p">
    <div class="qtd-box">
      <div class="pull-left box-qtd">
        <button class="btn btn-menos"><span>‒</span></button>
        <input type="text" class="qtd" value="2" min="1">
        <button class="btn btn-mais"><span>+</span></button>
      </div>
    </div>
  </a>
  <div class="buy-button-wrap"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p">
    </a>
    <div class="btnComprarHover"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a><button type="button"><a title="ITALICO"
          href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a>
        <div class="buy-button-normal" id="3145" name="3145"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a><a class="buy-button-normal-a3145"
            href="https://www.hhhh.com/checkout/cart/add?sku=3145&amp;qty=1&amp;seller=1&amp;sc=1&amp;price=1400&amp;cv=CFE834FB1C376F743357FB9AC6859173_&amp;sc=1" title="Comprar">yas</a></div>
      </button></div>
  </div>
</div>

<div class="product-buy"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p">
    <div class="qtd-box">
      <div class="pull-left box-qtd">
        <button class="btn btn-menos"><span>‒</span></button>
        <input type="text" class="qtd" value="2" min="1">
        <button class="btn btn-mais"><span>+</span></button>
      </div>
    </div>
  </a>
  <div class="buy-button-wrap"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p">
    </a>
    <div class="btnComprarHover"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a><button type="button"><a title="ITALICO"
          href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a>
        <div class="buy-button-normal" id="3145" name="3145"><a title="ITALICO" href="https://www.hhhh.com/bag-refil-pim-calabresa-it-montosco-25g-023820/p"></a><a class="buy-button-normal-a3145"
            href="https://www.hhhh.com/checkout/cart/add?sku=3145&amp;qty=1&amp;seller=1&amp;sc=1&amp;price=1400&amp;cv=CFE834FB1C376F743357FB9AC6859173_&amp;sc=1" title="Comprar">yas</a></div>
      </button></div>
  </div>
</div>

1
  • Amigo lo simplificaste todo, muchas gracias! Commented el 18 feb. 2021 a las 20:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.