将javascript应用于网格编辑器

我正在使用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>              

@foreach（Model.Items中的变量项）{

}

我的剧本：

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

$（文档）.ready（函数（）{
$（“.item”）.hover（函数（）{
$（“.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'）；
});
});

---

提前谢谢

看看如何使用“this”仅针对您悬停的任何元素中的元素：