foreach循环jquery怎么办答案

【问题标题】：how to do for o foreach cycle jqueryforeach循环jquery怎么办
【发布时间】：2014-12-18 04:05:06
【问题描述】：

怎么做循环，同一个语句不重复，每个item显示不同的内容谢谢

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();
    }
});


});

【问题讨论】：

标签： jquery css foreach

【解决方案1】：

我建议在您的 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();
        }
    });
});

【讨论】：

【解决方案2】：

除了将事件绑定到不同的类之外，您还可以将其设置为通用的，这有助于未来的修改和可重用性

请找到小提琴链接

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

【讨论】：

【解决方案3】：

猜你尊重某种秩序

您可以使用 in/out hover 方法处理程序和 toggle() 方法。顺便说一句，以这种方式使用公共类和索引：

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

【讨论】：

【解决方案4】：

不要为每个元素使用不同的类。为它们提供相同的类，以便您可以一次将它们全部绑定。使用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

【讨论】：

【解决方案5】：

我可以建议你在这种情况下使用部分选择器

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

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

Fiddle

【讨论】：