1

一連の div を出力する mvc ビューがあります。すべてに userproject のクラスがあります。それがdivの唯一のクラスです。ただし、すべてのテキストを表示するために、divを小さなdivから大きなdivにアニメーション化するはずのtoggleClassを呼び出すと。アニメーションは、同じ div のページの各 div に対して 1 回実行されます。

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 に対して 1 回発生することです...しかし、それは同じ div に発生するため、大きくなってから小さくなります...大きくなってから小さくなります...など。誰もが理由を知っていますか?

4

1 に答える 1

0

jquery は、ループ内の通常のビューでレンダリングされた部分ビューにありました。これは、元のビューに多数の jquery コードのコピーが配置されていたことを意味します。そのため、jquery の各コピーは 1 回しか実行されませんでしたが、ページの構造が原因で多くの関数がレンダリングされました。将来的には、部分ビューに jquery / javascript を含めない可能性があります。

于 2013-07-23T16:01:19.107 に答える