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.
$(document).ready(function(){...});
?