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. Maybe with an data attribute?

var item_first = $('.item_first');
var item_second = $('.item_second');
var item_third = $('.item_third');
var item_fourth = $('.item_fourth');

var image_first = $('.image_first');
var image_second = $('.image_second');
var image_third = $('.image_third');
var image_fourth = $('.image_fourth');


$(document).ready(function () {
    item_first.hover(function () {
        image_first.addClass('active');
    }, function () {
        image_first.removeClass('active');
    });

    item_second.hover(function () {
        image_second.addClass('active');
    }, function () {
        image_second.removeClass('active');
    });
    item_third.hover(function () {
        image_third.addClass('active');
    }, function () {
        image_third.removeClass('active');
    });

    item_fourth.hover(function () {
        image_fourth.addClass('active');
    }, function () {
        image_fourth.removeClass('active');
    });
});

https://jsfiddle.net/gt5kw00q/

Sorry for my bad English. I try to write so that you understand it.

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

回答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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <ul class="left__inner">
    <li class="left__item item_first active">
      <a href="#" title="Werte" target="_self">Werte</a>
    </li>
    <li class="left__item item_second">
      <a href="#" title="Team" target="_self">Team</a>
    </li>
    <li class="left__item item_third">
      <a href="#" title="Arbeitsweise" target="_self">Arbeitsweise</a>
    </li>
    <li class="left__item item_fourth">
      <a href="#" title="Standort" target="_self">Standort</a>
    </li>
  </ul>
</div>

<div class="right">
  <div class="right__inner">
    <div class="right__image image_first">
      IMAGE 1 HERE
    </div>
    <div class="right__image image_second">
      IMAGE 2 HERE
    </div>
    <div class="right__image image_third">
      IMAGE 3 HERE
    </div>
    <div class="right__image image_fourth">
      IMAGE 4 HERE
    </div>
  </div>
</div>

回答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.

回答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() {
  function addClass(key) {
    $('.' + items[key]).addClass('active');
  }

  function removeClass(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <ul class="left__inner">
    <li class="left__item item_first active">
      <a href="#" title="Werte" target="_self">Werte</a>
    </li>
    <li class="left__item item_second">
      <a href="#" title="Team" target="_self">Team</a>
    </li>
    <li class="left__item item_third">
      <a href="#" title="Arbeitsweise" target="_self">Arbeitsweise</a>
    </li>
    <li class="left__item item_fourth">
      <a href="#" title="Standort" target="_self">Standort</a>
    </li>
  </ul>
</div>

<div class="right">
  <div class="right__inner">
    <div class="right__image image_first active">
      IMAGE 1 HERE
    </div>
    <div class="right__image image_second">
      IMAGE 2 HERE
    </div>
    <div class="right__image image_third">
      IMAGE 3 HERE
    </div>
    <div class="right__image image_fourth">
      IMAGE 4 HERE
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/47351808/to-compress-my-jquery