压缩我的jQuery

Question

如何压缩有用的jQuery？ 我想添加一个函数以将元素悬停在另一个元素上时显示该元素。 下面的功能正是我想要的，但我希望它更具动态性。 也许具有数据属性？

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

给您的元素一个类名和一个带有target（id）的data属性：

<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">

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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