A smarter way to do this jQuery?

Posted by Nicky Christensen on Stack Overflow See other posts from Stack Overflow or by Nicky Christensen
Published on 2012-06-07T10:33:21Z Indexed on 2012/06/07 10:41 UTC
Read the original article Hit count: 290

Filed under:

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 ?

© Stack Overflow or respective owner

Related posts about jQuery