Question

I’m wondering if its possible to make the following code more concise:

 $('#americasTrigger').hover(
  function () {
          $('#americasImg').fadeIn()
      },
  function(){
          $('#americasImg').fadeOut()
  }
  );

$('#europeTrigger').hover(
  function () {
      $('#europeImg').fadeIn();
  },
  function(){
      $('#europeImg').fadeOut();
  }
  );    

$('#middleEastTrigger').hover(
  function () {
      $('#middleEastImg').fadeIn();
  },
  function(){
      $('#middleEastImg').fadeOut();
  }
  );    

//More etc

The country name stays the same for each, with ‘Trigger’ or ‘Img’ added to the end. There’s a lot of repetition here which indicates to me I’m not going about the this best way.

I had thoughts around:

• Crearting a case scenario, or
• Somehow getting the selector being used for a selection, making it a string, splitting it’s name to capture the country in use and applying that to the nested fadeIn/Out function with ‘Img’ on the end.

Is this possible or am I being too fancy?

Edit 1: Thanks verymuch for all the responses, apologies for not posting the html, i’ve put this bellow.
In short I’m using image maps over a bg image (of earth) as the hover triggers for fading in/out my absolutely positioned on-hover images.

<div class="mapTub"> 

  <img src="images/transparentPixel.png" class="mapCover" usemap="#worldMap" width="524px" height="273px"/>

  <map name="worldMap" id="worldMap">
    <area id="americasTrigger" shape="poly" coords="1,2,3" href="#americas" />
    <area id="europeTrigger" shape="poly" coords="4,5,6" href="#europe" />
    <area id="middleEastTrigger" shape="poly" coords="7,8,9" href="#middleEast" />
  </map>

<img src="images/International_americas_dark.png" class="americas" id="americasImg" />
<img src="images/International_europe_dark.png" class="europe" id="europeImg" />
<img src="images/International_middleEast_dark.png" class="middleEast" id="middleEastImg"  />

</div>

---

Reigel’s answer seems like the way to go here, ill try it out report back, further comments welcome! 🙂

Answer 1

Me, without knowledge of the html, suggest this…

$('#americasTrigger, #europeTrigger, #middleEastTrigger').hover(
    function () {
        var id = this.id;
        $('#'+id.replace('Trigger', 'Img')).fadeIn();
        //$('#'+id.slice('0',id.indexOf('Trigger'))+'Img').fadeIn();
    },
    function(){
        var id = this.id;
        $('#'+id.replace('Trigger', 'Img')).fadeOut();
        //$('#'+id.slice('0',id.indexOf('Trigger'))+'Img').fadeOut();
    }
);

You can also use .replace() as suggested by Anurag in the comment below…

---

id ='europeTrigger';
alert(id.slice('0',id.indexOf('Trigger'))); // alerts 'europe'
// '#'+id.slice('0',id.indexOf('Trigger'))+'Img' is '#europeImg'

demo

​