压缩我的jQuery [英] To Compress my jQuery

问题描述

如何压缩我的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'）; 
 
 $ b $（document）.ready（function（）{
 item_first.hover（function（）{
 image_first.addClass（'active'）; $ b （）函数（）{
 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/

对不起我的英文不好。我试着写，这样你就明白了。

解决方案

请在下面找到工作解决方案，
$ b

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 =Wertetarget =_ self> Werte< / a> < /锂> < li class =left__item item_second> < a href =＃title =Teamtarget =_ self>团队< / a> < /锂> < li class =left__item item_third> < a href =＃title =Arbeitsweisetarget =_ self> Arbeitsweise< / a> < /锂> < li class =left__item item_fourth> < a href =＃title =Standorttarget =_ self> Standort< / a> < /锂> < / 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>  

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.

解决方案

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>

这篇关于压缩我的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！