0

嗨，我有这段代码，它只是显示/隐藏一些绝对定位的 div。这段代码没问题，但很长。如何简化此代码？一些循环是一种方式，但我不知道如何动态地编写它。我的意思是这是一个简单的问题。

查询代码：

$(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>

ETC...

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

4

2 回答 2

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

于 2013-08-23T06:52:38.507 回答
0

尝试

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-23T07:02:00.480 回答