1

我有一个标有“添加评论”的 div，它扩展了一个显示用于添加评论的文本区域的 div 区域。

div 位于一个局部视图中，位于 for each 循环之间。这会创建 div 的多个实例class="slide"。因此，当$('div.slide').click被触发时，它会打开所有评论实例。

如果我将 id 附加到每个 class="slide" Ex: class="slide1", class="slide2", 等...，我如何编辑下面的 javascript 以仅打开该特定 div？

jQuery

<script type="text/javascript">
    $(document).ready(function () {
        // Hide the "view" div.
        $('div.view').hide();
        // Watch for clicks on the "slide" link.
        $('div.slide').click(function () {
            // When clicked, toggle the "view" div.
            $('div.view').slideToggle(400);
            return false;
        });
    });
</script>

父视图

@foreach (var post in Posts)
                {
                <div class="post">@Html.DisplayFor(modelItem => post.Message)</div>  
                <div>@Html.Partial("_Comment")</div>
                }

部分视图“_Comment”

<div class="slide" style="cursor: pointer;">Add Comment</div>
<div class="view"> 
 <form method="post" id="commentForm"                       
      action="@Url.Action("AddComment")">                  

    @Html.TextArea("Comment", new { rows = 5, cols = 50 })   
    <br />
    <input type="submit" value="Add Comment" />
</form>
</div>
4

2 回答 2

0

将该实例分配为函数的参数怎么样？

$('div.slide').click(function (this) {
    this.next().doSomething();
    ...
});

http://api.jquery.com/next/

假设您的 html 代码的结构将始终是：

slide_1
view_1
slide_2
view_2
slide_3
view_3
...
于 2012-12-21T20:22:45.677 回答
0

无需求助于 id。

如果你的结构与你的问题一样，你可以做

$(document).ready(function () {
    // Hide the "view" div.
    $('div.view').hide(); // maybe this should be handled by CSS rules 
    // Watch for clicks on the "slide" link.
    $('div.slide').click(function () {
        // When clicked, toggle the "view" div.
        $(this).next().slideToggle(400);
        return false;
    });
});

我也将删除该.hide()部分并为此使用 css

.view{
    display:none;
}

http://jsfiddle.net/gaby/bhhMC/的示例

于 2012-12-22T16:38:23.093 回答