1

これが私のコードの動作の例です。

次のコードを何度も繰り返す Web サイトを開発しようとしています。

$(function() {
    $('.nav1, .nav1x').not('#current').hover(
        function () {
            $(".nav1x a").css("visibility","visible");
          },
          function () {
            $(".nav1x a").css("visibility","hidden");
          }
    );
    $(".nav2, .nav2x").not('#current').hover(
        function () {
            $(".nav2x a").css("visibility","visible");
          },
          function () {
            $(".nav2x a").css("visibility","hidden");
          }
    );
    $(".nav3, .nav3x").not('#current').hover(
        function () {
            $(".nav3x a").css("visibility","visible");
          },
          function () {
            $(".nav3x a").css("visibility","hidden");
          }
    );
    $(".nav4, .nav4x").not('#current').hover(
        function () {
            $(".nav4x a").css("visibility","visible");
          },
          function () {
            $(".nav4x a").css("visibility","hidden");
          }
      );
});

選択の性質上、これをもっと簡単に書く方法がわかりません。.nav1 と .nav1x の両方にホバー イベントがあり、それ以外の場合は私の Web サイトで発生するちらつきを防ぐため、これを維持する必要があります。頭のいい人で、これをもっとうまく書く方法を知っている人はいますか?

4

4 に答える 4

3

これはうまくいくようです：http://jsfiddle.net/gibble/mvNCz/5/

$(function() {
    $.each(['nav1', 'nav2', 'nav3', 'nav4'], function(index, value) {
        $("." + value + ", ." + value + "x").not('#current').hover(
            function () {
                $("." + value + "x a").css("visibility","visible");
            },
            function () {
                $("." + value  + "x a").css("visibility","hidden");
            }
        );
    });
});
于 2012-10-16T20:10:23.720 に答える
2

JavaScript をまったく使用せずに実行できます: http://jsfiddle.net/Shmiddty/mvNCz/7/

.nav li{ display: inline;position:relative;}
.nav li span, .nav li a{   
    font-size: 24px; 
    text-decoration:  none;
    color:black; 
}

.nav li + li:before{
    content:'.';
    font-size:24px;
    display:inline-block;
    padding:0 .25em;
}

.nav li.current:after,
.nav li:hover:after{
    content:attr(data-name);
    font-size:24px;
    position:absolute;
    left:0;
    top:1em;
    color:#00f;
}
.nav li+li.current:after,
.nav li+li:hover:after{
    left:.75em;
}

HTML

<ul class="nav">
    <li class="current" data-name="Images"><a href="#">Images</a></li>
    <li data-name="Articles"><a href="#">Articles</a></li>
    <li data-name="Links"><a href="#">Links</a></li>
    <li data-name="Contact"><a href="#">Contact</a></li>
</ul>
于 2012-10-16T20:37:59.913 に答える
2

コードを再構築することをお勧めします。html の現在の構造は冗長です。メニューを簡素化するための私のアプローチは次のとおりです。

HTML

  <ul class="nav">
        <li id="current"><a href="#">Images</a></li>
        <li><span>.</span></li>
        <li><a href="#">Articles</a></li>
        <li><span>.</span></li>
        <li><a href="#">Links</a></li>
        <li><span>.</span></li>
        <li><a href="#">Contact</a></li>
    </ul>

CSS

.nav li{ display: inline;}
.nav li span, .nav li a{   
    font-size: 24px; 
    text-decoration:  none;
    color:black; 
}

.clone li a { color: blue }​

JavaScript

$('.nav').clone().addClass('clone').insertAfter('.nav').find('li').css('visibility', 'hidden');

$('.nav').on('hover', 'li', function(e){ 
    if( e.type === 'mouseenter' )
        $('.clone').find('li').eq( $(this).index() ).css('visibility', 'visible'); 
    else if( e.type === 'mouseleave' )
        $('.clone').find('li').eq( $(this).index() ).css('visibility', 'hidden');  
});

現在のコードの問題は、将来のメニュー項目のために、html で 2 回、javascript で 1 回、3 つの異なる場所を変更する必要があることです。上記のコードでは、html を 1 回変更するだけです。

于 2012-10-16T20:29:15.973 に答える
0

ご存じのとおり、同じコードをより JQuery で記述するには、次のようにします。

$(".nav li[id!=current]").hover(
    function () {
        $("."+ $(this).attr("class") + "x a").css("visibility","visible");
    }, 
      function () {
        $("."+ $(this).attr("class") + "x a").css("visibility","hidden");
    }
);

http://jsfiddle.net/96wvB/

于 2012-10-16T20:30:22.830 に答える