Question

Here is an example of what my code does.

我正在尝试开发一个包含以下代码的多次迭代的网站：

$(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上都有一个悬停事件，以防止在我的网站上发生闪烁，因此必须保留。你们这些聪明的人是否知道更好的方式来写这个？

Answer 1

这似乎有效：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");
            }
        );
    });
});

Answer 2

我建议重构你的代码，html的当前结构是多余的。 Here's my approach简化菜单。

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中对三个不同的位置进行两次更改，并在javascript中进行一次更改。使用上面的代码，您只需对html进行一次更改即可。

Answer 3

你可以在没有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>

Answer 4

根据您的了解，编写相同代码的更多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/

有没有办法整合这些多行代码？

4 个答案: