este es el código que escribí: -
for (let i = 1; i < 10; i++) { var sfq = ".main-head"+[i]; console.log(sfq); $(sfq).mouseover(function(){ $(sfq).addClass("colorChangeOnMouseOver"); setTimeout(function(){$(sfq).removeClass("colorChangeOnMouseOver")},500); }) }La salida deseada: -
//$(".main-head1").mouseover(function(){ // $(".main-head1").addClass("colorChangeOnMouseOver"); // setTimeout(function(){$(".main-head1").removeClass("colorChangeOnMouseOver")},500); // }); // $(".main-head2").mouseover(function(){ // $(".main-head2").addClass("colorChangeOnMouseOver"); // setTimeout(function(){$(".main-head2").removeClass("colorChangeOnMouseOver")},500); // });y así sucesivamente... Puedo entender por qué no funciona, pero ¿hay alguna forma de evitarlo?
Es posible que desee convertir la variable sfq en una variable let para que, desde dentro de setTimeout, el valor referido sea correcto.
En este momento, todas las funciones dentro de setTimeout se referirán al mismo valor de sfq que es .main-head9 .
Además, [] no es necesario usar esto.
for (let i = 1; i < 10; i++) { let sfq = ".main-head"+i; console.log(sfq); $(sfq).mouseover(function(){ $(this).addClass("colorChangeOnMouseOver"); setTimeout(function(){$(sfq).removeClass("colorChangeOnMouseOver")},500); }) }Puedes hacerlo así:
$("[class*=main-head]").mouseenter(function() { var $this = $(this); $this.addClass("colorChangeOnMouseOver"); setTimeout(function() { $this.removeClass("colorChangeOnMouseOver") }, 500); }); class*=main-head significa que seleccionará todos los elementos que tengan una clase que contenga main-head
Manifestación
$("[class*=main-head]").mouseenter(function() { var $this = $(this); $this.addClass("colorChangeOnMouseOver"); setTimeout(function() { $this.removeClass("colorChangeOnMouseOver") }, 500); }); .colorChangeOnMouseOver{ color:red;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="test main-head1">main-head1</div> <div class="main-head1">main-head2</div> <div class="main-head1">main-head3</div>