jquery - 如何使用循环简化此代码

Question

您好，我有这段代码可以简单地显示/隐藏一些绝对定位的 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>

等...

class="ctvrtina_vysuv"=> 绝对定位的 div
class="ctvrtina_menu_hp_popup"=> 相对定位的 div

Answer 1

您可以向您拥有的那些 div 添加一个属性，如 rel="1"、rel="2"等等，并添加一个通用类，如 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