压缩我的jQuery

如何压缩我的jQuery有用？ 我想在我hover另一个时添加一个显示元素的函数。 下面的function正是我想要的，但我希望它更具动感。 也许有数据属性？

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/

对不起，我的英语不好。 我试着写，以便你理解它。

Answer 1

我会写下面的代码。 $('img')将选择所有图像并在hover将代码应用于它们。

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

Answer 2

根据你的小提琴，尝试这种方法

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

演示

 $(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; } 

  
 
 
 Werte 
 
 Team 
 
 Arbeitsweise 
 
 Standort 
 
 
 
 
 
 IMAGE 1 HERE 
 
 IMAGE 2 HERE 
 
 IMAGE 3 HERE 
 
 IMAGE 4 HERE 
 
  

Answer 3

为您的元素提供目标（id）的类名和数据属性：

然后，您可以一次将hover事件绑定到所有这些元素：

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

$(this)是对当前hover元素的引用。

Answer 4

请在下面找到工作方案，享受:)

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

  
 
 
 Werte 
 
 Team 
 
 Arbeitsweise 
 
 Standort 
 
 
 
 
 
 IMAGE 1 HERE 
 
 IMAGE 2 HERE 
 
 IMAGE 3 HERE 
 
 IMAGE 4 HERE