3

estoy tratando de usar este code en mi sitio: codepen

Pero los botones de subir y bajar número no me funcionan y creo que es por la versión de jquery pues en el de la guía usa la versión 2.1.3 y yo uso la 3.4.1.

He intentado un par de cosas ya pero las guías que encuentro son algo viejas.

Los códigos que estoy usando son estos:

HTML:

<span class="input-number-decrement">–</span><input class="input-number" type="text" value="1" min="0" max="10"><span class="input-number-increment">+</span>

CSS:

    * {
  box-sizing: border-box;
}

.input-number {
  width: 80px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
}

.input-number,
.input-number-decrement,
.input-number-increment {
  border: 1px solid #ccc;
  height: 40px;
  user-select: none;
}

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: 30px;
  line-height: 38px;
  background: #f1f1f1;
  color: #444;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active {
  background: #ddd;
}

.input-number-decrement {
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.input-number-increment {
  border-left: none;
  border-radius: 0 4px 4px 0;
}

JS:

    (function() {

  window.inputNumber = function(el) {

    var min = el.attr('min') || false;
    var max = el.attr('max') || false;

    var els = {};

    els.dec = el.prev();
    els.inc = el.next();

    el.each(function() {
      init($(this));
    });

    function init(el) {

      els.dec.on('click', decrement);
      els.inc.on('click', increment);

      function decrement() {
        var value = el[0].value;
        value--;
        if(!min || value >= min) {
          el[0].value = value;
        }
      }

      function increment() {
        var value = el[0].value;
        value++;
        if(!max || value <= max) {
          el[0].value = value++;
        }
      }
    }
  }
})();

inputNumber($('.input-number'));

Todo me funciona bien, el único problema que tengo es que los botones de + y - no realizan ninguna acción pero poniendo el número manualmente me lo toma bien, con eso no tengo ningún problema.

Soy un poco nuevo en la comunidad por lo que no se bien cómo poner códigos y de hecho me dice que he escrito mucho código y necesito más detalles, por eso estoy rellenando con más texto.

Gracias de antemano por la ayuda.

5
  • Puedes añadir el código que has intentado hasta ahora?
    – Jose
    Commented el 14 dic. 2019 a las 4:33
  • He agregado más detalles. Gracias Commented el 14 dic. 2019 a las 4:38
  • Has añadido el código de script dentro de $(document).ready(function(){...});?
    – Jose
    Commented el 14 dic. 2019 a las 4:42
  • Por Dios amigo, lo añadí y funciona bien muchas gracias. Estoy aprendiendo a programar y hay demasiadas cosas que no se, pasé horas intentando hacerlo funcionar y vos me das la solución bien rápido, muchas gracias. Commented el 14 dic. 2019 a las 4:46
  • Ya que te ha servido añado la respuesta
    – Jose
    Commented el 14 dic. 2019 a las 4:47

2 respuestas 2

0

Problema

Falta el $(document).ready(function(){....}) esto se pone al principio de cada código JQuery.

¿Porque la posible confusión? Es muy posible que la confusión venga de que en codepen no es necesario añadir el $(document).ready(function(){...}) ya que lo maneja la propia plataforma

0

Tu primera línea del JS debería tener el $

$(function() {
      // Aquí todo el JavaScript y/o jQuery
})

El símbolo $ es un alias de la función jQuery.

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.