1

idでdivを展開および折りたたむjquery関数があります：

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

複数のslideContentdivをそれぞれのslideTogglerdivに接続したいと思います。ただし、slideContentおよびslideToggler divの数は、以下に示すように、「foreach」を使用してページ上に動的に作成されます。

<% 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を渡すにはどうすればよいですか。

4

1 に答える 1

2

.netコードは、同じIDを持つ複数の要素を作成するため、無効なhtmlを作成しますmySlideToggler。mySlideContent（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>
于 2012-12-26T17:47:06.920 に答える