CODEWITHSUNDEEP
jquery
user431619
user431619

Reputation:

A smarter way to do this jQuery?

I have a a map on my site, and clicking regions a class should be toggled, on both hover and click, I've made a jQuery solution to do this, however, I think it can be done a bit smarter than i've done it? my HTML output is this:

<div class="mapdk">
                <a data-class="nordjylland" class="nordjylland" href="#"><span>Nordjylland</span></a>
                <a data-class="midtjylland" class="midtjylland" href="#"><span>Midtjylland</span></a>
                <a data-class="syddanmark" class="syddanmark" href="#"><span>Syddanmark</span></a>
                <a data-class="sjaelland" class="sjalland" href="#"><span>Sjælland</span></a>
                <a data-class="hovedstaden" class="hovedstaden" href="#"><span>Hovedstaden</span></a>
            </div>

And my jQuery looks like: 

if ($jq(".area .mapdk").length) {
    $jq(".mapdk a.nordjylland").hover(function () {
        $jq(".mapdk").toggleClass("nordjylland");
    }).click(function () {
        $jq(".mapdk").toggleClass("nordjylland");
    });
    $jq(".mapdk a.midtjylland").hover(function () {
        $jq(".mapdk").toggleClass("midtjylland");
    }).click(function () {
        $jq(".mapdk").toggleClass("midtjylland");
    });
}

The thing is, that with what i've done, i have to make a hover and click function for every link i've got - I was thinking I might could keep it in one hover,click function, and then use something like $jq(this) ? But not sure how ?

Upvotes: 1

Views: 1298

Answers (3)

user1432124
user1432124

Reputation:

use this selector

if ($jq(".area .mapdk").length) {
    $jq(".mapdk a").hover(function () {
        $jq(".mapdk").toggleClass($jq(this).attr("class"));
    }).click(function () {
        $jq(".mapdk").toggleClass($jq(this).attr("class"));
    });

}

Upvotes: 0

Curtis
Curtis

Reputation: 103368

You need to make use of $jq(this). $jq(this) refers to the element which called the event listener.

For example:

$jq(".mapdk a").hover(function () {
        $jq(this).parents(".mapdk").toggleClass($jq(this).data("class"));
    }).click(function () {
        $jq(this).parents(".mapdk").toggleClass($jq(this).data("class"));
    });

To break it down:

  • $jq(this) calls the element which was hovered (ie. the anchor element).
  • .parents(".mapdk") finds the first parent with the class .mapdk
  • $jq(this).data("class") gets the value of data-class from your anchor element

Upvotes: 1

Rune FS
Rune FS

Reputation: 21742

You could use the each function of jQuery to iterate all anchor tags within .mapdk

DISCLAIMER I'm assuming you only wish to set the class of the parent .mapdk. If you have multiple with that class (that aren't parents of the anchor) then the below will not work as your code but I'm assuming you wouldn't want to set the class for all .mapdk regardless of which anchor you hover/click.

//Since the function is the same for all event handlers let's just declare that once
var handler = function () {
        var $this = $jq(this);
        $this.parents(".mapdk").toggleClass($this.attr("class"));
};
//find all the anchor tags within .mapdk that has a class specified
$jq(".mapdk a[class]").each(function{
    this.hover(handler).click(handler);
});

Upvotes: 0

Related Questions