Сократить (оптимизировать) функцию jQuery

302

04 августа 2017, 02:40

Имеется три элемента (изображение, заголовок и блок), которым необходимо добавлять/удалять класс active в зависимости от hover.

Сделала так:

var svg_planung = $('#planung path.hover'),
    svg_realisation = $('#realisation path.hover'),
    svg_betrieb = $('#betrieb path.hover'),
    planung_box = $('#planungBox'),
    realisation_box = $('#realisationBox'),
    betrieb_box = $('#betriebBox'),
    planung_title = $('#planungTitle'),
    realisation_title = $('#realisationTitle'),
    betrieb_title = $('#betriebTitle');
// по умолчанияю активные
$(planung_box).addClass('active'); 
$(svg_planung).addClass('active');
$(planung_title).addClass('active');
$(svg_planung).hover(function() {
    $('.dev-box').removeClass('active');
    $('path.hover').removeClass('active');
    $('.svg-box .title').removeClass('active');
    $(planung_box).addClass(' active');
    $(svg_planung).addClass(' active');
    $(planung_title).addClass(' active');
});
$(svg_realisation).hover(function() {
    $('.dev-box').removeClass('active');
    $('path.hover').removeClass('active');
    $('.svg-box .title').removeClass('active');
    $(realisation_box).addClass(' active');
    $(svg_realisation).addClass(' active');
    $(realisation_title).addClass(' active');
});
$(svg_betrieb).hover(function() {
    $('.dev-box').removeClass('active');
    $('path.hover').removeClass('active');
    $('.svg-box .title').removeClass('active');
    $(betrieb_box).addClass(' active');
    $(svg_betrieb).addClass(' active');
    $(betrieb_title).addClass(' active');
});

Код работает как ожидается. Возможно ли его сократить каким либо образом (оптимизировать)?

Answer 1

Я бы передал шаблон и стили, но вот оптимизация

//Это можно добавить в самом шаблоне,а не скриптом делать
    $('#planungBox,#planung path.hover,#planungTitle').addClass('active');
    $('path.hover').hover(function(){
        var self = $(this);
        $.each(['#planung','#realisation','#betrieb'],function(i,v){
            if(self.parent().is(v)){
                $('.dev-box,path.hover,.svg-box .title').removeClass('active');
                self.addClass('active');
                $(v+'Box,'+v+'Title').addClass('active');
            }
        });
    });

Answer 2

Может быть я что-то не понял, но:

var elementsArr = ['#planung path.hover',  
                   '#realisation path.hover',  
                   '#betrieb path.hover' 
                   ]; 
 
$('#planungBox,#planung path.hover,#planungTitle').addClass('active'); 
 
$(elementsArr.join(',')).hover(function() { 
  var parentIdName = $(this).closest('g').attr('id'); 
 
  $('.dev-box').removeClass('active'); 
  $('path.hover').removeClass('active'); 
  $('.svg-box .title').removeClass('active'); 
  $('#' + parentIdName + 'Box').addClass(' active'); 
  $(this).addClass(' active'); 
  $('#' + parentIdName + 'Title').addClass(' active'); 
});

.svg-box { 
  position: relative; 
} 
 
#Projektablauf path { 
  cursor: pointer; 
  transition: all 0.3s ease; 
} 
 
#Projektablauf path.hover { 
  filter: url(#dropshadow); 
  opacity: 0; 
} 
 
#Projektablauf path.hover:hover { 
  opacity: 1; 
} 
 
.dev-box { 
  display: none; 
  background: red; 
  height: 50px; 
  width: 50px; 
  margin: 15px; 
  text-align: center; 
  font-size: 20px; 
  color: white; 
} 
 
.dev-box.active { 
  display: block; 
} 
 
#planung path.hover.active { 
  opacity: 1; 
} 
 
.title { 
  position: absolute; 
  font-size: 1.2rem; 
  transition: all 0.3s ease; 
} 
 
.title:first-child { 
  top: 17px; 
} 
 
.title~.title { 
  right: 70px; 
} 
 
.title~.title~.title { 
  right: 70px; 
  bottom: 15px; 
} 
 
.title.active { 
  font-size: 1.5rem; 
  font-weight: 400; 
} 
 
#planung path.hover.active, 
#realisation path.hover.active, 
#betrieb path.hover.active { 
  opacity: 1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="svg-box"> 
  <div id="planungTitle" class="title">1. text</div> 
  <div id="realisationTitle" class="title">2. text</div> 
  <div id="betriebTitle" class="title active">3. text</div> 
  <svg width="562px" height="248px" viewBox="0 0 562 248" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
     
  <filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" > 
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>  
      <feOffset dx="2" dy="2" result="offsetblur"  /> 
      <feComponentTransfer> 
        <feFuncA type="linear" slope="0.5"/> 
      </feComponentTransfer> 
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
        <g id="Projektablauf" transform="translate(-118.000000, -1351.000000)"> 
            <g id="Ablauf" transform="translate(119.000000, 1144.000000)"> 
                <g id="2.-Realisation" transform="translate(0.000000, 177.000000)"> 
                    <g id="Graph---Planung"> 
                        <g id="betrieb" transform="translate(193.000000, 150.000000)"> 
                            <path d="M143.544814,22.0253781 C134.476876,33.4488689 120.445343,40.788749 104.681768,40.788749 C86.4574984,40.788749 70.5442109,30.9842795 61.9492997,16.3932762 L24.9035042,17.3743572 L6.42520156,47.6729575 C25.9833429,81.4885507 62.6604324,104.257077 104.681768,104.257077 C144.091104,104.257077 178.79486,84.2273356 199.089617,53.8447332 L162.671339,53.0522607 L143.544814,22.0253781 Z" id="Fill-6" fill="#E1E1E1" transform="translate(102.757409, 60.325177) rotate(-10.000000) translate(-102.757409, -60.325177) "></path> 
                            <path class="hover" d="M143.544814,22.0253781 C134.476876,33.4488689 120.445343,40.788749 104.681768,40.788749 C86.4574984,40.788749 70.5442109,30.9842795 61.9492997,16.3932762 L24.9035042,17.3743572 L6.42520156,47.6729575 C25.9833429,81.4885507 62.6604324,104.257077 104.681768,104.257077 C144.091104,104.257077 178.79486,84.2273356 199.089617,53.8447332 L162.671339,53.0522607 L143.544814,22.0253781 Z" id="Fill-6" fill="#E1E1E1" transform="translate(102.757409, 60.325177) rotate(-10.000000) translate(-102.757409, -60.325177) "></path> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(239.815335, 114.979579) rotate(-60.000000) translate(-239.815335, -114.979579) " points="186.147524 -0.895496313 186.147524 44.9439025 293.483147 230.854655"></polyline> 
                        </g> 
                        <g id="realisation" transform="translate(272.000000, 0.000000)"> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(197.361080, 71.409679) scale(1, -1) rotate(-60.000000) translate(-197.361080, -71.409679) " points="162.426848 -10.8780845 162.426848 34.9613144 232.295312 153.697442"></polyline> 
                            <path d="M14.3329415,84.5989538 C38.7973414,87.5929149 57.7430963,108.329542 57.7430963,133.484204 C57.7430963,142.545334 55.2744384,151.028752 50.984548,158.323461 L69.7909433,188.832067 L106.492719,189.630879 C116.052796,173.099111 121.520475,153.926824 121.520475,133.484204 C121.520475,73.3759586 74.2488617,24.2608917 14.684128,20.9317148 L31.9567699,52.2629068 L14.3329415,84.5989538 Z" id="Fill-3" fill="#929597" transform="translate(67.926708, 105.281297) rotate(-10.000000) translate(-67.926708, -105.281297) "></path> 
                            <path class="hover" d="M14.3329415,84.5989538 C38.7973414,87.5929149 57.7430963,108.329542 57.7430963,133.484204 C57.7430963,142.545334 55.2744384,151.028752 50.984548,158.323461 L69.7909433,188.832067 L106.492719,189.630879 C116.052796,173.099111 121.520475,153.926824 121.520475,133.484204 C121.520475,73.3759586 74.2488617,24.2608917 14.684128,20.9317148 L31.9567699,52.2629068 L14.3329415,84.5989538 Z" id="Fill-3" fill="#929597" transform="translate(67.926708, 105.281297) rotate(-10.000000) translate(-67.926708, -105.281297) "></path> 
                        </g> 
                        <g id="planung" transform="translate(0.000000, 21.000000)"> 
                            <path d="M235.199169,149.908757 C232.822091,144.145105 231.501757,137.836232 231.501757,131.219086 C231.501757,104.294834 253.206038,82.4289332 280.151837,81.9692992 L297.568617,50.0144314 L280.191654,18.4906686 C218.002976,18.9312833 167.724378,69.2279266 167.724378,131.219086 C167.724378,149.067152 171.898799,165.942061 179.31831,180.94198 L197.635752,150.905688 C197.635752,150.905688 218.476781,150.352568 228.897295,150.076009 C230.99792,150.020258 235.199169,149.908757 235.199169,149.908757 Z" id="Fill-1" fill="#F89B1C" transform="translate(232.646498, 99.716324) rotate(-10.000000) translate(-232.646498, -99.716324) "></path> 
                            <path class="hover" d="M235.199169,149.908757 C232.822091,144.145105 231.501757,137.836232 231.501757,131.219086 C231.501757,104.294834 253.206038,82.4289332 280.151837,81.9692992 L297.568617,50.0144314 L280.191654,18.4906686 C218.002976,18.9312833 167.724378,69.2279266 167.724378,131.219086 C167.724378,149.067152 171.898799,165.942061 179.31831,180.94198 L197.635752,150.905688 C197.635752,150.905688 218.476781,150.352568 228.897295,150.076009 C230.99792,150.020258 235.199169,149.908757 235.199169,149.908757 Z" id="Fill-1" fill="#F89B1C" transform="translate(232.646498, 99.716324) rotate(-10.000000) translate(-232.646498, -99.716324) "></path> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(90.914251, 68.867376) scale(-1, -1) rotate(-62.000000) translate(-90.914251, -68.867376) " points="58.0721296 -15.8193708 58.0721296 30.0200281 123.756372 153.554122"></polyline> 
                        </g> 
                    </g> 
                </g> 
            </g> 
        </g> 
    </g> 
</svg> 
</div> 
 
 
<div id="planungBox" class="dev-box">1</div> 
<div id="realisationBox" class="dev-box">2</div> 
<div id="betriebBox" class="dev-box">3</div>

Можно выпилить всё в отдельную функцию и при наведении вызывать её с параметрами?