0
330
Views¿Cómo solucionar este problema de numeración por superposición?
La demostración de trabajo de Codepen aquí . Cuando haga clic en la cuadrícula, dibujará líneas con puntos rojos numerados. El problema al que me enfrento ahora es : digamos que si hace clic en la cuadrícula para dar una línea 1,2,3 como se muestra arriba y porque desea crear una línea con el punto número 5, debe volver a hacer clic en el 2 nuevamente . Entonces, se salta un número porque lo etiqueta como 1,2,3,5 y no hay 4 . Traté de modificar el código en la línea 160 porque es responsable de la adición de la numeración. Cualquier ayuda será apreciada.
var elements = document.getElementsByClassName('red-dot'); var eLength = elements.length; kk=0; dValue = eLength+1;Gracias por leer y que tengas un buen día :)
2 answers
Answer question0
Tienes que introducir una nueva variable global numberOfDots . Inicializarlo a cero. Aumente su valor solo cuando se dibuje un punto en una posición de cuadrícula que aún no se haya tomado, es decir, dentro del bloque if (!isTaken) . Luego, en lugar de dValue = eLength+1 , puede hacer dValue = numberOfDots+1 .
0
El problema reside en create_dot . Cuando calcula el siguiente número, tiene en cuenta todos los puntos rojos, incluso los que ha ocultado:
//line 157 var elements = document.getElementsByClassName('red-dot'); var eLength = elements.length; kk=0; dValue = eLength+1;Lo que haría es esto (evitando variables globales):
Cuando establezca el fondo en transparente, agregue una clase hidden para adaptar su selector:
//line 172 if (!isTaken) { newDot.dataset['dvalue'] = dValue; newDot.innerHTML = newDot.dataset.dvalue; } else { newDot.style.backgroundColor = 'transparent'; newDot.classList.add('hidden'); }Después :
//line 157 var elements = document.querySelectorAll('.red-dot:not(.hidden)'); var eLength = elements.length; kk=0; dValue = eLength+1;De esta forma, solo contarás los puntos rojos visibles. Esta técnica se puede adaptar para satisfacer sus necesidades, puede filtrar los elementos y verificar también su propiedad de color de fondo si lo prefiere. El error está solo en el hecho de que no muestra algunos puntos rojos, pero los cuenta de todos modos y eso lleva a su función a omitir números.