Question

如何做循环并且不重复相同的陈述，每个词都显示不同的内容感谢

http://jsfiddle.net/acuario1220/jwy65yp3/

$( document ).ready(function() {
 var sub_menu_timer;


$('.nav-item1, .containerMenu1').on({
    mouseenter: function () {
        $('.containerMenu1').show();
    },
    mouseleave: function () {
        $('.containerMenu1').hide();
    }
});

$('.nav-item2, .containerMenu2').on({
    mouseenter: function () {
        $('.containerMenu2').show();
    },
    mouseleave: function () {
        $('.containerMenu2').hide();
    }
});

$('.nav-item3, .containerMenu3').on({
    mouseenter: function () {
        $('.containerMenu3').show();
    },
    mouseleave: function () {
        $('.containerMenu3').hide();
    }
});


});

Answer 1

我可以建议你使用部分选择器来处理

这样的情况

$('div[class*="nav-item"], div[class*="containerMenu"]').on('mouseenter',function(){
    var classToShow = '.containerMenu' + $(this).attr('class').match(/\d+/);
    $(classToShow).toggle();
});

与.each方法相比，它会使您的代码更短。

Fiddle

Answer 2

不要为每个元素使用不同的类。给他们相同的类，这样你就可以一次绑定它们。使用data-XXX属性将菜单项与应显示的容器相关联。

HTML：

<div id="page-wrapper">
    <div class="containerMenu containerMenu1">1</div>
    <div class="containerMenu containerMenu2">1</div>
    <div class="containerMenu containerMenu2">1</div>
    <div class="nav">
        <div class="nav-item" data-container="containerMenu1">ITEM 1</div>
        <div class="nav-item" data-container="containerMenu2">ITEM 2</div>
        <div class="nav-item" data-container="containerMenu3">ITEM 3</div>
    </div>
</div>

JS：

$(document).ready(function () {

    $(".nav-item").on({
        mouseenter: function () {
            $('.' + $(this).data('container')).show();
        },
        mouseleave: function () {
            $('.' + $(this).data('container')).hide();
        }
    });

    $(".containerMenu").on({
        mouseenter: function () {
            $(this).show();
        },
        mouseleave: function () {
            $(this).hide();
        }
    });
});

DEMO

Answer 3

猜猜你尊重某种秩序

您可以使用输入/输出悬停方法处理程序和toggle()方法。 BTW，使用通用类和索引：

$( document ).ready(function() {  
    $('.nav-item').hover(function(){
        $(".containerMenu").eq($(this).index()).toggle();
    });
});

使用HTML：

 <div id="page-wrapper">
        <div class="containerMenu containerMenu1">1</div>
        <div class="containerMenu containerMenu2">2</div>
        <div class="containerMenu containerMenu3">3</div>
        <div class="nav">
            <div class="nav-item">ITEM 1</div>
            <div class="nav-item">ITEM 2</div>
            <div class="nav-item">ITEM 3</div>
        </div>
  </div>

jsFiddle

Answer 4

不是将事件绑定到不同的类，而是将其设置为通用的，这有助于将来修改和重用性

请找到小提琴链接

`http://jsfiddle.net/jwy65yp3/5/`

Answer 5

我建议在您的HTML中添加ID，并从您的课程中删除＃：

<div id="page-wrapper">
    <div id="cm-1" class="containerMenu">1</div>
    <div id="cm-2" class="containerMenu">2</div>
    <div id="cm-3" class="containerMenu">3</div>
    <div class="nav">
        <div id="ni-1" class="nav-item">ITEM 1</div>
        <div id="ni-2" class="nav-item">ITEM 2</div>
        <div id="ni-3" class="nav-item">ITEM 3</div>
    </div>
</div>

然后你可以这样做：

$(document).ready(function() {
    $('.containerMenu, .nav-item').on({
        mouseenter: function(e) {
            var id = e.target.id.split('-')[1];
            $('#cm-' + id).show();
        },
        mouseleave: function(e) {
            var id = e.target.id.split('-')[1];
            $('#cm-' + id).hide();
        }
    });
});

如何做o foreach循环jquery

5 个答案: