Question

使用此代码创建包含数据的多个网格：

@foreach(var set in viewModelEnvironment.SystemEnvironmentVariabelSets) 
{
    <p class="slide"><a href="#" class="btn-slide">@set.Name</a></p>

         <div id="panelToHide">

        //Creating the grids for each set here...

        </div>
}

这会创建一堆带有附加按钮的隐藏“面板”。当点击其中一个按钮时，我希望相应的面板展开。如果使用此代码只有一个面板显示，则此功能正常工作：

     $(".btn-slide").click(function () {
        $("#panelToHide").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

如何在for循环中创建的每个唯一面板和按钮上使用.click功能？如何为for循环中的每个元素赋予唯一标识符并更改jquery函数.click以单独对应每个元素？

由于

Answer 1

$("a.btn-slide").each(function(idx,el){
    $(this).click(function(){
        $('div.panel:eq('+idx+')').slideToggle('slow');
        /*...*/
    });
});

只要按钮和面板的顺序相同，面板的数量与按钮的数量相同，这将起作用，如下所示：

<a class="btn-slide">open first panel</a>
<a class="btn-slide">open second panel</a>
<a class="btn-slide">open third panel</a>

<div class="panel">this is the first panel</div>
<div class="panel">this is the second panel</div>
<div class="panel">this is the third panel</div>

Answer 2

你快到了。单击处理程序的结构是正确的，但您指的是要通过id隐藏的面板，在这种情况下它不是唯一的。（Id属性在整个页面中应该是唯一的）。我敢打赌你的每个环节都有同样的div崩溃了吗？

做两件事 - 改变内部div以拥有一个类，比如

<div class="panelToHide">

然后，在单击处理程序中，查找与当前节点（this）相关的（从中减去）的面板，而不是使用$（）函数全局查找

$(".btn-slide").click(function () {
    $(this).parent().nextAll('.panelToHide').slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

在for循环中创建的元素上使用jquery函数

2 个答案: