Question

我有一个输出一堆div的mvc视图。都有一类userproject。这是div上唯一的课程。然而，当我调用toggleClass时，它应该将div从一个小div设置为一个大div，以便查看所有文本。动画在同一div上的每个div上运行一次。

jquery

$(document).ready(function () {

    $(".userproject").click(function (e) {
        $(this).toggleClass("userprojectclicked", "slow");
    });

});

css

.userproject
{
    float: left;
    border:2px solid;
    border-radius:5px;
    width: 270px;
    padding: 15px;
    margin: 5px;
    position: relative;
    background-color: green;
    overflow:hidden;
}

.userprojectclicked
{
    width: 900px;
    background-color: white;
    border-color: green;
}

在循环中查看下面的div输出。

<div class="userproject">

<p>@Html.LabelFor(m => @Model.Name) : @Html.DisplayFor(m => Model.Name)</p>
<p>@Html.LabelFor(m => @Model.Description) : @Html.DisplayFor(m => Model.Description)</p>
<p>@Html.LabelFor(m => @Model.UserId) : @Html.DisplayFor(m => Model.UserId)</p>
<p>@Html.LabelFor(m => @Model.CategoryId) : @Html.DisplayFor(m => Model.CategoryId)</p>

</div>

问题是，动画在页面上的每个div都会出现一次......但是它发生在同一个div中，所以它变得大而小......大而小......等等有谁知道为什么？

Answer 1

jquery处于局部视图中，在循环内的常规视图中呈现。这意味着在原始视图中放置了许多jquery代码副本。所以jquery的每个副本只运行一次，但由于页面的结构，我提供了很多函数。将来我可能不会在我的部分视图中包含jquery / javascript。

对于此dom元素，Jquery toggleClass运行多次而不是一次

1 个答案: