将 javascript 应用于网格编辑器

Question

我正在使用 Umbraco 构建我的网站，我定义了一个带有局部视图的网格编辑器，还定义了一些要应用于该网格编辑器的 javascript 代码。 javascript 包括在悬停时应用一些效果。在我的页面中，我设法使用了这些效果，但是由于我的页面中有几个这样的网格编辑器，所以效果会在所有这些编辑器中复制，所以当我将鼠标悬停在其中一个上时，所有剩余的网格编辑器都来自同一类型也能得到效果。现在我将我的脚本放在 Master.cshtml。我如何将效果应用到当时鼠标悬停的网格编辑器？我设法用我定义的其他网格编辑器做了类似的事情，但为此我不需要 javascript 并且一切正常。

这是我的代码：

脚本：

@foreach(var item in Model.Items) {
<div class="work-item work-item-box">
        <a href=@Umbraco.TypedContent(item.GetValue<string>("workPage")).Url>
            <div class="item item-image"> 
                <img class="item item-image-img" src=@Umbraco.TypedMedia(item.GetValue<string>("image")).Url/>
            </div>
            <div class="item item-text" height="160" width="310">
                <div class="item item-text-title">@Html.Raw(item.GetValue("company"))<br></div>
                <div class="item item-text-description">@Html.Raw(item.GetValue("description"))</div>
            </div>
        </a>
</div>

}

我的脚本：

<script>
$( document ).ready(function() {
    $(".item").hover(function(){
        $(".item-text").toggleClass('item-text-effect');
        $(".item-image").toggleClass('item-image-effect');
        $(".item-image-img").toggleClass('item-image-effect-img');
        $(".item-text-title").toggleClass('item-text-title-effect');
        $(".item-text-description").toggleClass('item-text-description-effect');
    });
});
</script>

提前致谢！

Answer 1

看看使用 'this' 只定位您悬停的任何元素内的元素：How to get the children of the $(this) selector?

将 javascript 应用于网格编辑器

Applying javascript to a grid editor

javascript

asp.net-mvc

jquery

umbraco