CODEWITHSUNDEEP
jquery
user2997903
user2997903

Reputation: 9

Optimize Javascript code

I have a map with a bunch of link images on top of it. They all have the same image, with different positions.

<div id="map" class="small-12 large-9 left">
 <img src="a-map.jpg">
  <a class="city1"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city2"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city3"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city4"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city5"><img class="large-12 small-8" src="fundita-mov.png"></a>
</div>

The css for them (you get the idea)

#map a{position:absolute;}
a.cityx{left: 35%;top: 26%;}

When you hover or click any of the image link, some info attached to that specific link becomes visible in a sidebar.

 <div id="map-hover-result" class="small-12 large-3 left">
  <ul>
   <li id="city1" class="hidden">some info here</li>  
   <li id="city2" class="hidden">some info here</li> 
   <li id="city3" class="hidden">some info here</li>  
   <li id="city4" class="hidden">some info here</li> 
   <li id="city5" class="hidden">some info here</li>
  </ul></div>

The way I handle the "hidden" class is like this. Is there any way I could optimize this?

 <script> $("a.city1").hover(function(){$('#city1').toggleClass('hidden');});
           $("a.city1").click(function(){$('#city1').toggleClass('hidden');});
          $("a.city2").hover(function(){$('#city2').toggleClass('hidden');});
           $("a.city2").click(function(){$('#city2').toggleClass('hidden');});
          $("a.city3").hover(function(){$('#city3').toggleClass('hidden');});
           $("a.city3").click(function(){$('#city3').toggleClass('hidden');});
          $("a.city4").hover(function(){$('#city4').toggleClass('hidden');});
           $("a.city4).click(function(){$('#city4').toggleClass('hidden');});
          $("a.city5").hover(function(){$('#city5').toggleClass('hidden');});
           $("a.city5").click(function(){$('#city5').toggleClass('hidden');});
 </script>

Upvotes: 0

Views: 104

Answers (4)

Jonathan
Jonathan

Reputation: 1833

You can set the mouseover, mouseout and click events within a single function

$("#map").find('a').on('mouseover mouseout click', function (e) {
    e.preventDefault();
    var cl = $(this).attr('class');
    $('#' + cl).toggleClass('hidden');
});

JSFiddle

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

Assuming that (as your HTML shows) the a elements have only one class-name, and that class-name is equal to the id of the li:

$('a[class^="city"]').hover(function(){
    $('#' + this.className).toggleClass('hidden');
});

JS Fiddle demo.

References:

Upvotes: 4

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Change your script to 

$('#map').on('mouseenter mouseleave click', 'a[class^="city"]', function(){
   var classname = $(this).attr('class');
   $('#' + classname).toggleClass('hidden');
})

demo at http://jsfiddle.net/9dHR7/

Upvotes: 0

Jamiec
Jamiec

Reputation: 136084

Add a data-* attribute to the all links pointing to the right city and give them all a generic class

<a data-city="city1" class="city"><img class="large-12 small-8" src="fundita-mov.png"></a>
<a data-city="city2" class="city"><img class="large-12 small-8" src="fundita-mov.png"></a>

Then use 1 single selector for them all (you can also chain the 2 methods):

$("a.city").hover(function(){$('#' + $(this).data('city')).toggleClass('hidden');})
       .click(function(){$('#' + $(this).data('city')).toggleClass('hidden');});

You can even clean that up a bit more by using .on

$("a.city").on('hover click',function(){$('#' + (this).data('city')).toggleClass('hidden');});

Upvotes: 1

Related Questions