[SOLUCIONADO] Intentando cambiar "foreach" por "for"

[JUMASOL]

Hola a todos.

Tengo esta función que hace su trabajo de forma parcial por problemas de compatibilidad de foreach en diversos navegadores.

Código:

var toggles = document.querySelectorAll('.selector');
var active = null;
function toggleSubmenus (event) {
  var current = event.target;
  var isCurrentActive = current === active;

  toggles.forEach(function (toggle) {
    toggle.classList.toggle('visible', toggle === current && !isCurrentActive);
  });
  active = isCurrentActive ? null : current;
}
toggles.forEach(function(toggle) {
  toggle.addEventListener('click', toggleSubmenus);
});

Quiero cambiar foreach por for. Parece que hay diversas alternativas pero ninguna me ha funcionado. Quiero hacerlo sin jQuery. Supongo que será posible pero hasta ahora no me resulta nada.

He intentado hacerlo así (uno de los intentos):

Código:

var toggles = document.querySelectorAll('.selector');
var active = null;
function toggleSubmenus (event) {
  var current = event.target;
  var isCurrentActive = current === active;

for (let i = 0; i < toggles.length; i++) {
function (toggle) {
    toggle.classList.toggle('visible', toggle === current && !isCurrentActive);
  }
};
  active = isCurrentActive ? null : current;
}
for (let i = 0; i < toggles.length; i++) {
function(toggle) {
  toggle.addEventListener('click', toggleSubmenus);
}
};

Sin resultado.

¿Me podéis echar un cable???

[prueba230683]

Resulta que el método forEach de la clase NodeList no está soportado por Internet Explorer. Supongo que por eso quieres utilizar un bucle for en vez de forEach.

Tienes dos opciones, usar el bucle for que comentas:

Código Javascript:

var toggles = document.querySelectorAll('.selector');
var active = null;
function toggleSubmenus (event) {
  var current = event.target;
  var isCurrentActive = current === active;
 
  for(var i = 0; i < toggles.length; i++){
      toggles[i].classList.toggle('visible', toggles[i] === current && !isCurrentActive);
  }
  active = isCurrentActive ? null : current;
}
for(var i = 0; i < toggles.length; i++){
    toggles[i].addEventListener('click', toggleSubmenus);
}
 

O una opción más elegante, usar un polyfill (y así no necesitas cambiar el código cada vez que aparezca forEach):

Código Javascript:

// Polyfill:
 
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}
 
// Debajo pones el resto de tu codigo en el que usas forEach:
 
var toggles = document.querySelectorAll('.selector');
var active = null;
function toggleSubmenus (event) {
  var current = event.target;
  var isCurrentActive = current === active;
 
  toggles.forEach(function (toggle) {
    toggle.classList.toggle('visible', toggle === current && !isCurrentActive);
  });
  active = isCurrentActive ? null : current;
}
toggles.forEach(function(toggle) {
  toggle.addEventListener('click', toggleSubmenus);
});
 

[JUMASOL]

Gracias prueba230683, ambos funcionan pero añaden un problema en Internet Explorer, y puede que en algún otro.

El script es para hace un toggle de clases en dos enlaces. Sin actuar sobre la página, ambos carecen de clase (que sería "active"). Si pulsas uno, se inserta la clase para un efecto con css. Si lo vuelves a pulsar desaparece. Y lo mismo si pulsas el otro enlace, que activa su clase y desactiva la del otro.

Se trata de dos listas descendentes ocultas que deben mostrarse cuando el enlace sobre las mismas tiene el active. Cuando una está activa, la otra no por razones obvias.

Funciona en Chrome, Firefox y otros. Pero en IE lo que pasa cuando pulsas cualquiera de los dos enlaces es que se muestran las dos listas, si pulsas luego cualquiera de ellos, sea el que has pulsado o el otro, desaparecen las dos listas.

Estoy por dejarlo así, pero si se puede arreglar mejor.

[prueba230683]

Dos preguntas,

¿De qué versión de IE estamos hablando? Porque hay versiones muy antiguas (antes de la 9, creo) que en vez de event.target usan event.srcElement.

¿Te muestra algún error en la consola?

[JUMASOL]

Es IE11 y no muestra nada en consola.

[prueba230683]

Si miras la tabla de compatibilidad del método toggle:

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle#Browser_compatibility

Verás que IE11 no soporta el segundo parámetro de dicho método, por eso no funciona bien.
La solución es simular la funcionalidad de este parámetro, es decir, si la expresión toggle === current && !isCurrentActive es true, se añade la clase con .add, y si es false, se elimina la clase con .remove:

Código Javascript:

// Polyfill:
 
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}
 
// Debajo pones el resto de tu codigo en el que usas forEach:
 
var toggles = document.querySelectorAll('.selector');
var active = null;
function toggleSubmenus (event) {
  var current = event.target;
  var isCurrentActive = current === active;
 
  toggles.forEach(function (toggle) {
    if(toggle === current && !isCurrentActive){
      toggle.classList.add('visible');
    }else{
      toggle.classList.remove('visible');
    }
  });
  active = isCurrentActive ? null : current;
}
toggles.forEach(function(toggle) {
  toggle.addEventListener('click', toggleSubmenus);
});
 

De esta forma consigues el mismo efecto, pero ahora debería funcionar en IE11.


Ojalá algún día deje de existir IE

[JUMASOL]

Ahora sí que funciona.

Eres un maestro prueba230683.

Y lo que dices de IE, llegará antes de lo que creemos.

Yo soy un dummy en js y programación en general, pero experto en diseño, y si tú llevas tiempo en este mundo recordarás los días que pasamos adaptando webs a IE5 y 6, entre otras cosas que hoy están más que olvidadas, y eso que no fue hace tanto.

Gracias por tu ayuda.