0

こんにちは、絶対位置の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

4

2 に答える 2

1

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-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 に答える