对于此dom元素，Jquery toggleClass运行多次而不是一次(Jquery toggleClass runs multiple times instead of once for this

对于此dom元素，Jquery toggleClass运行多次而不是一次(Jquery toggleClass runs multiple times instead of once for this dom element)

我有一个输出一堆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中，所以它变得大而小......大而小......等等有谁知道为什么？

I have an mvc view that outputs a bunch of divs. All have a class of userproject. That is the only class on the divs. However when I call toggleClass which is supposed to animate the div from a small div to a big div in order to see all the text. The animation runs once for each div on the page on the same 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; }

view with the below div output in a loop.

<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>

The problem is that the animation occurs once for every div on the page ... but it happens to the same div so it grows big and then small ... big and then small ... etc. Does anyone know why?

最满意答案

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

The jquery was in a partial view that was rendered in a regular view inside a loop. This meant that there was many copies of the jquery code placed in the original view. So each copy of the jquery was only running once but I had many functions rendered because of how the page was structured. In the future I will likely not be including jquery / javascript in my partial views.