i wanted to select .main-head(1-9) and carry out a function

Question

this is the code that i wrote:-

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);
})
}

The desired output:-

//$(".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);
// });

and so on... I can understand why it doesn't work but is there a way around it?

the value of sfq should be enclosed in double qoutes and currently it is just passing .main-head(1-9) rather than passing ".main-head(1-9)" — utsav pathak, Oct 01 '21 at 07:23

Tushar Shahi · Answer 1 · 2021-10-01T07:33:52.873

0

You might want to convert the sfq variable into a let variable so from inside the setTimeout, the value referred is correct.

Right now all the functions inside setTimeout will refer to the same one value of sfq which is .main-head9.

Also, [] no need to use this.

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);
})
}

edited Oct 01 '21 at 07:33

answered Oct 01 '21 at 07:16

Tushar Shahi

16,452
1
18
39

for some reason it shows this.addclass is not a function rather i used $(sfq) Thanks dude appreciate it – utsav pathak Oct 01 '21 at 07:32
1

it should be `$(this)` or `$(sfq)` not `this` – Carsten Løvbo Andersen Oct 01 '21 at 07:33
No need for 1-9 at all, just give each `class='main-head'`. Looping to add events is generally not a good idea. – freedomn-m Oct 01 '21 at 07:35
1

I would also advise to use mouseenter and not mouseover, since mouseover will trigger everytime he moves the mouse on the element. – Carsten Løvbo Andersen Oct 01 '21 at 07:35

score 0 · Accepted Answer · answered Oct 01 '21 at 07:29

0

You can do it like this:

$("[class*=main-head]").mouseenter(function() {
  var $this = $(this);
  $this.addClass("colorChangeOnMouseOver");
  
  setTimeout(function() {
    $this.removeClass("colorChangeOnMouseOver")
  }, 500);
});

class*=main-head means that it will select all elements that has a class that contains main-head

Demo

$("[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>

answered Oct 01 '21 at 07:29

Carsten Løvbo Andersen

26,637
10
47
77

yeah that works thanks dude appreciate it – utsav pathak Oct 01 '21 at 07:56
@utsavpathak No problem, happy to help – Carsten Løvbo Andersen Oct 01 '21 at 07:58
@utsavpathak If this answer solves your problem, please consider accepting it. – joanis Oct 01 '21 at 13:24
Yeah sorry didn’t know how to do that thanks for reminding!! – utsav pathak Oct 01 '21 at 17:49
Every new user has to learn the ropes, thanks for taking the time to figure it out! – joanis Oct 04 '21 at 12:34

i wanted to select .main-head(1-9) and carry out a function

2 Answers2