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

Answer 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.