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! el 18 feb. 2021 a las 20:36

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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