主页 / 问题 / 701357
Accepted
siberian
Asked:2020-08-03 16:24:49 +0000 UTC2020-08-03 16:24:49 +0000 UTC

缩短（优化）jQuery 函数

  • 772

有 3 个元素（图像、标题和块）需要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');
});

该代码按预期工作。是否有可能以任何方式减少它（优化）？

javascript

2 个回答

  1. Best Answer

    我会传递模板和样式，但这是优化 

    //Это можно добавить в самом шаблоне,а не скриптом делать
    $('#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');
            }
        });
    });
    • 1

  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>

    是否可以将所有内容切割成一个单独的函数并在悬停时使用参数调用它？

    • 1

相关问题