jQuery attribute doesn't change

Question

As I'm a newbie to jQuery I'm having a little problem. I have two divs with product images, below them I have a couple of "color selectors" to let the customer look at what colors that's available. When the user hovers one of the "links" I have a new div showing with a color in it. Bla bla... The problem I'm having is that it always picks the ID from the first "color_selector" even when I'm hovering a link in the second color_selector span.

Edit: I can't post more than one hyperlink in the text, so I've changed all the <a> tags to <hyperlink>.

    <div class="product_color" id="color_product01_content"></div>
<span class="color_selsector" id="color_product01">
    <hyperlink href="javascript:void(0);" class="color_trigger" rel="000000">Product 01 color 01</hyperlink>
    <hyperlink href="javascript:void(0);" class="color_trigger" rel="efefef">Product 01 color 02</hyperlink>
</span>
<div class="product_color" id="color_product02_content"></div>
<span class="color_selsector" id="color_product02">
    <hyperlink href="javascript:void(0);" class="color_trigger" rel="000000">Product 02 color 01</hyperlink>
    <hyperlink href="javascript:void(0);" class="color_trigger" rel="efefef">Product 02 color 02</hyperlink>
</span>

And the jQuery:

$('a.color_trigger').mouseover(function(){
    var contentPanelId = $(".color_selector").attr("id");
    var valueColor = jQuery(this).attr("rel");
    $("#" + contentPanelId + "_content").css({"background-color" : "#" + valueColor, "display" : "block"});
});

SLaks · Accepted Answer · 2010-10-24 16:24:30Z

1

You need to get the .color_selector that contains this, like this:

var contentPanelId = $(this).closest(".color_selector").attr("id");

The .closest method finds the element's nearest parent that matches a selector.

answered Oct 24, 2010 at 16:24

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

Erwan · Accepted Answer · 2010-10-24 16:35:31Z

0

Try to replace

 var contentPanelId = $(".color_selector").attr("id");

by

var contentPanelId = $(this).parent().attr("id");

This should work!

answered Oct 24, 2010 at 16:35

Erwan

3981 gold badge4 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery attribute doesn't change

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related