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”=＆gt;绝对定位的div class =“ctvrtina_menu_hp_popup”=＆gt;相对定位的div

Answer 1

你可以为你喜欢的div =“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

Answer 2

尝试

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)
})

如何使用循环简化此代码

2 个答案: