如何使用週期簡化此代碼

嗨我有這個代碼，它只是顯示/隱藏一些絕對定位的div。這段代碼很好，但很長。我怎樣才能簡化這段代碼？一些循環是方式，但我不知道如何動態地寫這個。我的意思是這個問題很容易。如何使用週期簡化此代碼

JQUERY代碼：

$(document).ready(
    function() { 
     $("#vysuv_obal_1").hover(function() { 
      $("#vysuv_1").fadeIn(1500); 
      $("#vysuv_2").fadeOut(750); 
      $("#vysuv_3").fadeOut(750); 
      $("#vysuv_4").fadeOut(750); 
     }); 
     $("#vysuv_obal_2").hover(function() { 
      $("#vysuv_1").fadeOut(750); 
      $("#vysuv_2").fadeIn(1500); 
      $("#vysuv_3").fadeOut(750); 
      $("#vysuv_4").fadeOut(750); 
     }); 
     $("#vysuv_obal_3").hover(function() { 
      $("#vysuv_1").fadeOut(750); 
      $("#vysuv_2").fadeOut(750); 
      $("#vysuv_3").fadeIn(1500); 
      $("#vysuv_4").fadeOut(750); 
     }); 
     $("#vysuv_obal_4").hover(function() { 
      $("#vysuv_1").fadeOut(750); 
      $("#vysuv_2").fadeOut(750); 
      $("#vysuv_3").fadeOut(750); 
      $("#vysuv_4").fadeIn(1500); 
     }); 
});

HTML：

 <div class="ctvrtina_menu_hp_popup" id="vysuv_obal_1"> 

      <div id="vysuv_1" class="ctvrtina_vysuv" style="display:none;"> 
       <h2 class="nadpis_menu_hp_popup"><a href="#">Sjezdové lyžování</a></h2> 
       <div class="ctvrtina_in2"> 
        <a href="#"><span class="polozka_menu_hp_popup">1Sjezdové lyže</span></a> 
       </div> 
      </div> 

      <h2 class="nadpis_menu_hp_popup"><a href="#">Sjezdové lyžování</a></h2> 
      <div class="ctvrtina_in"> 
       <a href="#"><span class="polozka_menu_hp_popup">Sjezdové lyže</span></a> 
      </div> 
      <a href="#"><span class="tl_menu_hp_popup">Více info</span></a> 
     </div> 
     <div class="ctvrtina_menu_hp_popup" id="vysuv_obal_2"> 

      <div id="vysuv_2" class="ctvrtina_vysuv" style="display:none;"> 
       <h2 class="nadpis_menu_hp_popup"><a href="#">Sjezdové lyžování</a></h2> 
       <div class="ctvrtina_in2"> 
        <a href="#"><span class="polozka_menu_hp_popup">2Sjezdové lyže</span></a> 
       </div> 
      </div> 

      <h2 class="nadpis_menu_hp_popup"><a href="#">Běžecké lyžování</a></h2> 
      <div class="ctvrtina_in"> 
       <a href="#"><span class="polozka_menu_hp_popup">Sjezdové lyže</span></a> 
      </div> 
      <a href="#"><span class="tl_menu_hp_popup">Více info</span></a> 
     </div>

等...

類= 「ctvrtina_vysuv」=>絕對定位的div
類= 「ctvrtina_menu_hp_popup」=>相對定位div

來源

2013-08-23 Severe Torture

您可以添加一個屬性給那些你喜歡rel =「1」，rel =「2」等的div並添加一個像class =「iWantToHover」這樣的通用類，所以當你重寫代碼時它應該看起來像這樣;

$(".iWantToHover").hover(function() { 
    var r = $(this).attr('rel'); 
    for (int i = 1; i < 5; i++) { 
     if (r === i) { 
     $('#vysuv_'+i).fadeIn(750); 
     } else { 
     $('#vysuv_'+i).fadeOut(750); 
     } 
    } 
}

這應該給你一個想法。

這是我的第一個答案......

您可以使用jQuery選擇[1]喜歡;

$("#vysuv_obal_4").hover(function() { 
    $("[id~='#vysuv']").fadeOut(750); 
});

[1] http://www.w3schools.com/jquery/jquery_ref_selectors.asp

來源

2013-08-23 06:52:38 Omer

有了這個我隱藏所有絕對的div當我在1個DIV單擊從4 =>我需要這個4倍和每個代碼塊我需要添加淡入。但是，這是方式，但仍然不動態。 –

是的這個更新問題是方式（我有類似的JavaScript），它可以工作。我嘗試「Arun P Johny」的方式而不用改變HTML，然後我嘗試你的問題。感謝提示。 –

嘗試

var $ts = $('.ctvrtina_vysuv'); 
$("#vysuv_1, #vysuv_2, #vysuv_3, #vysuv_4").hover(function(){ 
    var $vysuv = $(this).find('.ctvrtina_vysuv').finish().fadeIn(1500); 
    $('.ctvrtina_vysuv').not($vysuv).finish().fadeOut(750) 
})

來源

2013-08-23 07:02:00

如何使用週期簡化此代碼

回答

相關問題