jquery - jquery查找动态创建的Id和wireup函数

Question

我有一个 jquery 函数来按 id 展开和折叠 div：

<script type="text/javascript">
$(function(){
    $('#mySlideContent').css('display','none');
    $('#mySlideToggler').click(function(){
        $('#mySlideContent').slideToggle('fast');
        return false;
    });
});
</script>

我想要多个 slideContent div，每个都连接到各自的 slideToggler div。然而，slideContent 和 slideToggler div 的数量是在页面上动态创建的，并带有“for each”，如下所示。

<% For Each c In Contacts%>
    <li id="grid_<%= c.ContactId %>" class="grid">
        <div class="inner">
            <div class="col">
                <div id="mySlideToggler">
                    <label>Name</label> 
                </div>
                <div id="mySlideContent" class="col-inner">
                    <%= c.Name%>
                </div>
            </div>
        </div>
    </li>
<%Next%>

如何传入我的 div 的动态创建的 id，以便我可以重用我的函数。

Answer 1

您的 .net 代码会创建无效的 html，因为它会创建多个具有相同mySlideToggler和mySlideContentid 的元素..（并且 id 必须是唯一的）

如果您将其更改为创建有效的 html（改用类）

<% For Each c In Contacts%>
    <li id="grid_<%= c.ContactId %>" class="grid">
        <div class="inner">
            <div class="col">
                <div class="mySlideToggler">
                    <label>Name</label> 
                </div>
                <div class="col-inner mySlideContent">
                    <%= c.Name%>
                </div>
            </div>
        </div>
    </li>
<%Next%>

然后使用脚本

<script type="text/javascript">
$(function(){
    $('.mySlideContent').hide();
    $('.mySlideToggler').click(function(){
        $(this).next().slideToggle('fast');
        return false;
    });
});
</script>