A smarter way to do this jQuery?
- by Nicky Christensen
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 ?
