Optimize Javascript code

Question

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>

@l2aelba: I believe the X is intended to denote a numeral in this case. — David Thomas
– David Thomas, Commented Dec 9, 2013 at 12:20

David Thomas · Accepted Answer · 2013-12-09 12:27:10Z

4

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:

Attribute-starts-with ([attribute^="value"]) selector.

edited Dec 9, 2013 at 12:27

answered Dec 9, 2013 at 12:19

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan · Accepted Answer · 2013-12-09 13:38:52Z

1

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

edited Dec 9, 2013 at 13:38

answered Dec 9, 2013 at 12:22

Jonathan

1,83314 silver badges15 bronze badges

2 Comments

user2997903 Over a year ago

is there way to modify the code so that when you click a new link, the old element gets the "hidden" class back? As it is now, you can click as many links as you want and all of them will become visible, instead of just the latest one. thanks

Jonathan Over a year ago

@user2997903 not as tidy but hopefully this will do what you are asking - jsfiddle.net/5FYTY/2

Jamiec · Accepted Answer · 2013-12-09 12:21:03Z

1

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');});

answered Dec 9, 2013 at 12:21

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Comments

Gabriele Petrioli · Accepted Answer · 2013-12-09 12:21:21Z

0

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/

answered Dec 9, 2013 at 12:21

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Collectives™ on Stack Overflow

Optimize Javascript code

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related