To Compress My Jquery

How can I compress my jQuery useful? I want to add a function to show an element when I hover another one. The function below is exactly what I want, but I want it more dynamic. Ma

Solution 1:

I would write the code like below. $('img') will select all your images and apply the code to them on hover.

$('img').hover(function(){
    $(this).addClass('active');
},function(){
     $(this).removeClass('active'); 
});

Solution 2:

Based on your fiddle, try this approach

$( ".left__item" ).hover( function(){
   $(".right__image").eq( $(this).index() ).addClass( "active" );
}, function(){
   $(".right__image").eq( $(this).index() ).removeClass( "active" );
})

Demo

$(document).ready(function() {
  $(".left__item").hover(function() {
    $(".right__image").eq($(this).index()).addClass("active");
  }, function() {
    $(".right__image").eq($(this).index()).removeClass("active");
  })
});

.right__image {
  display: none;
}

.right__image.active {
  display: block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="left"><ulclass="left__inner"><liclass="left__item item_first active"><ahref="#"title="Werte"target="_self">Werte</a></li><liclass="left__item item_second"><ahref="#"title="Team"target="_self">Team</a></li><liclass="left__item item_third"><ahref="#"title="Arbeitsweise"target="_self">Arbeitsweise</a></li><liclass="left__item item_fourth"><ahref="#"title="Standort"target="_self">Standort</a></li></ul></div><divclass="right"><divclass="right__inner"><divclass="right__image image_first">
      IMAGE 1 HERE
    </div><divclass="right__image image_second">
      IMAGE 2 HERE
    </div><divclass="right__image image_third">
      IMAGE 3 HERE
    </div><divclass="right__image image_fourth">
      IMAGE 4 HERE
    </div></div></div>

Solution 3:

Give your elements a class name and a data attribute with the target(id):

<div class="myHoverElement"id="ele1" data-targetid="image_1"></div>
<div class="myHoverElement"id="ele2" data-targetid="image_2"></div>
<img id="image_1">
<img id="image_2">

You can then bind a hover event to all those elements at once:

$('.myHoverElement').hover(
    function() { $('#' + $(this).data('targetid')).addClass('active') },
    function() { $('#' + $(this).data('targetid')).removeClass('active') }
);

$(this) is a reference to the currently hovered element.

Solution 4:

Please find working solution below, enjoy :)

var items = {
  item_first: 'image_first',
  item_second: 'image_second',
  item_third: 'image_third',
  item_fourth: 'image_fourth'
}

$(document).ready(function() {
  functionaddClass(key) {
    $('.' + items[key]).addClass('active');
  }

  functionremoveClass(key) {
    $('.' + items[key]).removeClass('active');
  }
  for (var key in items) {
    $('.' + key).hover(addClass.bind(null, key), removeClass.bind(null, key))
  }
});

.right__image {
  display: none;
}

.right__image.active {
  display: block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="left"><ulclass="left__inner"><liclass="left__item item_first active"><ahref="#"title="Werte"target="_self">Werte</a></li><liclass="left__item item_second"><ahref="#"title="Team"target="_self">Team</a></li><liclass="left__item item_third"><ahref="#"title="Arbeitsweise"target="_self">Arbeitsweise</a></li><liclass="left__item item_fourth"><ahref="#"title="Standort"target="_self">Standort</a></li></ul></div><divclass="right"><divclass="right__inner"><divclass="right__image image_first active">
      IMAGE 1 HERE
    </div><divclass="right__image image_second">
      IMAGE 2 HERE
    </div><divclass="right__image image_third">
      IMAGE 3 HERE
    </div><divclass="right__image image_fourth">
      IMAGE 4 HERE
    </div></div></div>