I'm stuck. I have two sets of dynamic elements with a mon class (zone and box) and a dynamic class:

<span class="zone dynamicClass1 clickable">Text</span>
<span class="zone dynamicClass6-2 clickable">Text</span>

<div class="box dynamicClass6-2"></div>
<div class="box dynamicClass1"></div>

When you mouseover the <span> "zone", I want to add a class to the <div> "box". Then on mouseleave I want the class to be removed. Thus, something like:

$(document).on("mouseenter",".zone",function(){
    $(this + ".the dynamic class").find(".box.the same dynamic class").addClass("hovered");
}).on("mouseleave",".zone",function(){
    $(".box.the found dynamic class").removeClass("hovered");
});

The dynamic classes have to be retrieved from the hovered element and then used in finding its match, they cannot be programmed by name. Any help would be great.

I'm stuck. I have two sets of dynamic elements with a mon class (zone and box) and a dynamic class:

<span class="zone dynamicClass1 clickable">Text</span>
<span class="zone dynamicClass6-2 clickable">Text</span>

<div class="box dynamicClass6-2"></div>
<div class="box dynamicClass1"></div>

When you mouseover the <span> "zone", I want to add a class to the <div> "box". Then on mouseleave I want the class to be removed. Thus, something like:

$(document).on("mouseenter",".zone",function(){
    $(this + ".the dynamic class").find(".box.the same dynamic class").addClass("hovered");
}).on("mouseleave",".zone",function(){
    $(".box.the found dynamic class").removeClass("hovered");
});

The dynamic classes have to be retrieved from the hovered element and then used in finding its match, they cannot be programmed by name. Any help would be great.

• javascript
• jquery

• 1 Are those dynamic classes only for identifying a corresponding .box? If so, it would easier for you to use a data-* attribute (e.g. data-box="dynamicClass1") – George Commented Mar 25, 2014 at 15:20
• You're really making this hard, try using something else to indentify the elements, like the index, a data attribute, anything other than some random class in the middle of the className – adeneo Commented Mar 25, 2014 at 15:20
• I am reading about these data- attributes. They are new to me. It appears that they are new in HTML5, what will they do in older browsers? Also, an ID should only be used once on a page, a class can be used as many times as needed. Can data- attributes be used anywhere needed? Can I have a data- attribute in my text (<span>) and my image (<div>)? – Thomas Commented Mar 25, 2014 at 15:49

3 Answers 3

The way you have it setup right now, you search for the div inside the span. What you want to do is get the class and then find the according div. I would suggest moving the mon class to either an id data attribute, so you can do this:

<span class="zone clickable" id="dynamicClass1">Text</span>
<span class="zone clickable" id="dynamicClass6-2" >Text</span>

var currentClass = $(this).attr("id");
$("div." + currentClass).addClass("hovered");

or this:

<span class="zone clickable" data-class="dynamicClass1">Text</span>
<span class="zone clickable" data-class="dynamicClass6-2" >Text</span>

var currentClass = $(this).data("class");
$("div." + currentClass).addClass("hovered");

See this JSFiddle: http://jsfiddle/7v3hd/1/

DEMO

$(document).on("mouseenter",".zone",function(){
    var $that   = $(this),
        classes = $that.attr('class'),

        // this is the meat here
        // you need to do a string manipulation
        // to get the dynamic class out of the
        // class attribute. You could also do this
        // with regex, or split.
        theDynamicClass = classes.replace('zone', '').replace('clickable', '').trim(),
        $boxWithSameClass = $(".box."+theDynamicClass);

    $boxWithSameClass.addClass("hovered");
    $that.one("mouseleave",function(){
        $boxWithSameClass.removeClass("hovered");
    });
});

You can use;

$(document).on("mouseenter",".zone",function(){
    var classes = $(this).attr("class").split(" ");

    $("div." + classes[1]).addClass("hovered");
}).on("mouseleave",".zone",function(){
    var classes = $(this).attr("class").split(" ");
    $("div." + classes[1]).removeClass("hovered");
});

HEre is a working demo: jsfiddle