jquery change css for different ids with the same class

Question

i have 3 divs with the same class.

<div id="qq1" class="cl">sentence</div>
<div id="qq2" class="cl">sentence</div>
<div id="qq3" class="cl">sentence</div>

well i'd like to know how can i write correct code for entering mouse calling with one function for 3 divs (calling cl class) and returning the correct id for change css.for ex:

<script>
$('.cl').live('mouseenter', function() {
    var currentId = $(this).attr('id');
    $('currentId').css("background-color", "#99cc33");
    $('currentId').css("color", "white");
});
$('.cl').live('mouseleave', function() {
    var currentId = $(this).attr('id');
    $('currentId').css("background-color", "white");
    $('currentId').css("color", "#404040");
});
</script>

But there's something wrong 'cause it doesn't work

I would replace the correct answer as nnnnnn's answer. That answer is more correct and should be the one people follow should they have a similar problem and find this question to help guide them. On stack overflow it is not about who answered "a" correct answer first, but the best answer to the problem. nnnnnn got it more correct first. — Kai Qing
– Kai Qing, Commented Jan 14, 2012 at 1:48
@7thkernel - you're simply changing the foreground and background colors when the mouse enters and leaves a <div> with the cl class... I'm curious, why aren't you just doing this with a :hover in a CSS rule? No Javascript is required. — Stephen P
– Stephen P, Commented Jan 14, 2012 at 2:09
@Stephen P it's obvious but my question is how can i do in js, dont you? ;) — 7thkernel
– 7thkernel, Commented Jan 14, 2012 at 2:23

nnnnnn · Accepted Answer · 2012-01-14 00:29:23Z

1

You don't ever use the currentId variable, instead you try to use a string that contains the letters c, u, r, etc., 'currentId'.

To make it work with that variable you would need to say $('#' + currentId).css() - so if, e.g., currentId is 'qq1' then in effect you would be saying $('#qq1').css().

However you don't need the id at all because you can simply use $(this):

$('.cl').live('mouseenter', function() {
    $(this).css({"background-color" : "#99cc33",
                 "color" : "white"});
});

$('.cl').live('mouseleave', function() {
    $(this).css("background-color", "white");
    $(this).css("color", "#404040");
});

Within a jQuery event handler this refers to the DOM element itself, while $(this) creates a jQuery object for that element so that you can call jQuery methods on it. Note that the .css() method accepts a map of multiple properties so you can set them all with a single call - I've shown that syntax in the mouseenter but not the mouseleave so that you can compare.

(Note: not related at all to your question, but if you are using jQuery 1.7+ you should stop using .live() because it has been deprecated in favour of .on() - there are instructions on the .live() doco page for how to convert your code. If you are using < 1.7 but > 1.4.2 you should use .delegate().)

edited Jan 14, 2012 at 0:29

answered Jan 14, 2012 at 0:23

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kai Qing Over a year ago

Why was I re-credited for this? Your answer is more correct. Also, you could update your answer to chain the .live().live() calls.

nnnnnn Over a year ago

Thanks @Kai - I didn't chain the calls because I didn't want to put too much new information in the same post when it wasn't directly related to the problem.

Kai Qing Over a year ago

lol - precisely why I didn't mention $(this). I didn't want the response to be too re-written or the reason why the failure was happening may not have been clear. But the haste to reply quickly meant I wasn't thinking to just thoroughly explain the rewrite, which would have been the best way to respond. Anyhow, thanks.

Kai Qing · Accepted Answer · 2012-01-14 00:22:08Z

0

<script>
$('.cl').live('mouseenter', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "#99cc33");
    $('#' + currentId).css("color", "white");
});
$('.cl').live('mouseleave', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "white");
    $('#' + currentId).css("color", "#404040");
});
</script>

You were attempting to call a variable as a literal string. Remember to use the # id selector then append your variable to that string.

answered Jan 14, 2012 at 0:22

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

Comments

Todd Bellamy · Accepted Answer · 2012-01-14 00:27:56Z

0

Just do this instead:

<script> 
$('.cl').live('mouseenter', function() { 
    $(this).css("background-color", "#99cc33"); 
    $(this).css("color", "white"); 
}); 
$('.cl').live('mouseleave', function() { 
    var currentId = $(this).attr('id'); 
    $(this).css("background-color", "white"); 
    $(this).css("color", "#404040"); 
}); 
</script>

answered Jan 14, 2012 at 0:27

Todd Bellamy

1523 bronze badges

Comments

Grigor · Accepted Answer · 2012-01-14 00:31:09Z

0

$(document).ready(function() {
  $('.cl').click(function() {
    var currentId = $(this).attr('id');

    $("#"+currentId).css();
  });
});

this is the basic idea, the rest is just knowledge

answered Jan 14, 2012 at 0:31

Grigor

4,06910 gold badges44 silver badges80 bronze badges

Collectives™ on Stack Overflow

jquery change css for different ids with the same class

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related