En un juego en línea, se les pregunta a los estudiantes "¿Cuántos niños de 12 años ya tienen (...)" y tienen que elegir cuántos iconos de 25 personas (4 %) colorearán. Esto es en realidad una entrada de rango, pero Pensé que también podría hacerse fácilmente con un tipo de entrada = "número".
Ya lo tengo funcionando hasta cierto punto. La flecha hacia arriba o el mouse hacia arriba agregan la clase necesaria, pero la clase de eliminación aún no funciona. Cuando ingreso un número, el ícono de personas con ese número obtiene la clase, pero todos los íconos con una identificación más baja también deben obtener la clase.
Puede encontrar el ejemplo en vivo aquí . El código que estoy usando:
HTML:
<svg id="manneke1" class="manneke" (…) /></svg> (…) <svg id="manneke25" class="manneke" /></svg> <input type="number" id="inputMannekes" class="form-control text-center" name="inputMannekes" value="0" min="0" max="25"/>CSS:
.manneke { fill:none; stroke:#004f75; stroke-linecap:round; stroke-linejoin:round; stroke-width:11.49px; } .gevuld { fill:#f5c1bc; stroke: #e66557; }JavaScript:
$("#inputMannekes").change(function () { if (this.getAttribute('value') === this.value) { $(this).data('lastvalue', this.value); console.log(this.value); } else { if (this.value > $(this).data('lastvalue')) { $("#manneke"+$(this).val()).addClass("gevuld"); } else { $("#manneke"+$(this).val()).removeClass("gevuld"); } } }).change();No tiene que almacenar el valor en los atributos de datos ( $(this).data(...) ) cuando puede usar variables let myVariable = ... . No estoy seguro de qué estabas tratando de lograr exactamente con esto. También desea iterar sobre todos los íconos porque es posible que el número no cambie solo uno (por ejemplo, el usuario puede escribir directamente 25 en la entrada).
Veo que usaste jQuery, pero la solución se puede hacer fácilmente con JavaScript nativo. Es por eso que adjunto una muestra sin jQuery.
// code just for this example (create 24 svgs) const iconsCount = 25; const svg = document.querySelector('.manneke'); const root = document.querySelector('.root'); for (let i = 0; i < iconsCount - 1; i++) root.append(svg.cloneNode(svg)); // code for class replacement const svgs = document.querySelectorAll('.manneke'); const input = document.querySelector('input'); input.addEventListener('change', (e)=>{ // for each icon... for (let i = 0; i < iconsCount; i++) { // ...add or remove className? i < e.target.value ? svgs[i].classList.add('gevuld') : svgs[i].classList.remove('gevuld') } }); .manneke { width: 30px; fill:none; stroke:#004f75; stroke-linecap:round; stroke-linejoin:round; stroke-width:11.49px; } .gevuld { fill: #f5c1bc; stroke: #e66557; } <div class="root"> <svg class="manneke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 253.49 384.48"><path class="cls-1" d="M240.77,192.85,180,132s-9.73-11.86-25.49-11.86a60.57,60.57,0,1,0-55.43,0C83.27,120.17,73.54,132,73.54,132L12.72,192.85a23.81,23.81,0,0,0,33.67,33.67l24-24V354.92a23.82,23.82,0,0,0,47.63,0v-86h17.43v86a23.81,23.81,0,1,0,47.62,0V202.51l24,24a23.81,23.81,0,0,0,33.68-33.67Z"></path></svg> </div> <input type="number" value="0" min="0" max="25"/>Utilizar este:
$("#inputMannekes").change(function () { for(var i=1; i<= $(this).val(); i++) { $("#manneke" + i).addClass("gevuld"); } for(var i=$(this).val() + 1; i<= 25; i++) { $("#manneke" + i).removeClass("gevuld"); } })