Estoy tratando de pasar de un marco Bootstrap 4 a un marco Bootstrap 5, lo que significa alejarme de jQuery.
Tengo varios elementos en una página, todos con el nombre de clase .info-box y un atributo de la siguiente manera
<div class="card card-icon col-md-4 info-box" data-href="file.php?e=AA"> <div class="card card-icon col-md-4 info-box" data-href="file.php?e=BB"> <div class="card card-icon col-md-4 info-box" data-href="file.php?e=CC">Cuando el usuario hace clic en el elemento de la tarjeta, la intención es abrir el enlace. El siguiente JS se acerca, pero vincula los tres elementos de la tarjeta al último enlace (=CC)
var elements = document.getElementsByClassName('info-box'); for(var i = 0; i < elements.length; i++) { var element = elements[i]; var newLoc= elements[i].getAttribute('data-href'); element.onclick = function() {window.location = newLoc;} }¿Puede sugerir una forma de vincular el atributo data-href correcto a la tarjeta correcta?
Creo que encontré una solución.. ¿Esto parece eficiente?
<script> var elements = document.getElementsByClassName('info-box'); [].forEach.call(elements, function(elements) { elements.onclick = function() { var newLoc= this.getAttribute('data-href'); window.location = newLoc; } }) </script>Lo encontré aquí .. javascript: función de llamada por nombre de clase
var elements = document.getElementsByClassName('info-box'); for(let i = 0; i < elements.length; i++) { let element = elements[i]; let newLoc= elements[i].getAttribute('data-href'); element.onclick = function() {window.location = newLoc;} }Use let en lugar de var.
El problema es que var no tiene alcance de bloque, lo que significa que, en su caso, la variable newLoc se define globalmente. Utilice let en lugar de var .
Creo que encontré una solución.. ¿Esto parece eficiente?
Su solución también debería funcionar bien, porque envuelve la var newLoc en una función, lo que limita su alcance. Sin embargo, usar let es generalmente una buena práctica.