Question

我有一个jquery函数来扩展和折叠div的id：

<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和mySlideContent ID的多个元素..（且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>

Jquery查找动态创建的Id和连线功能

1 个答案: