I'm using Umbraco to build my website and I defined a grid editor with its partial view, and also defined some javascript code to be applied to that grid editor. The javascript consists on applying some effects while hover. In my page I managed to work with the effects, but as I have several of these grid editors in my page, the effect gets replicated in all of them, so when I mouseover one of them, all the remaining grid editors from the same type get the effects too. For now I put my script at the Master.cshtml. How can I apply the effect to the grid editor I mouseover at that time? I managed to do something similar with other grid editor that I defined, but for this I didn't need javascript and everything worked fine.
Here is my code:
Script:
@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>
}
My script:
<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>
Thanks in advance!
