jQuery列表中每个产品的基于悬停的弹出事件

jQuery hover-based popup events for every product in list

本文关键字：悬停 出事件 于悬停 jQuery 列表      更新时间：2023-09-26

我对jquery中的一个函数有点问题。每次用户悬停产品时，我都需要显示一个弹出窗口。我的产品在一个列表中，我想为每个产品指定一个弹出窗口，以便显示其标题和描述：

这是产品列表（以缩略图形式显示）

 <!-- This Div contains the List of Products -->
<ul class="thumbnails">
                @foreach (var thumbnail in Model.ForfaitsInThumbNail)
                {
    <div class="thumbnail">
                                <img src= "@Url.Action("GetById", "ImageForfait", new { idForfait = thumbnail.Forfait.Id })" alt=""/>
                                <div class="caption">
                                    <h2 class="fontTitle">@thumbnail.Forfait.Titre</h2> <h5 class="fontYearHijri"> pour l'année @thumbnail.Forfait.AnneeHijri H </h5>
                                    .......
                                </div>
       <!-- This div should contain the pop-up for every Product -->
                            <div class='pop-up' id='pop-up'>    <h3>"@thumbnail.Forfait.Titre"</h3><p>"@thumbnail.Forfait.Description"</p></div>
                            </div>
    </div>
                   }
</ul>

这是我糟糕的jquery函数，它只适用于一个产品，而不是列表中的所有产品

<script>
$('.thumbnail').each(function() {
    $(this).hover(function (e) {
    $('.pop-up').show()
        .css('top', e.pageY + 20)
        .css('left', e.pageX + 10)
        .appendTo('body');
}, function () {
    $('.pop-up').hide();
});
});
$('.thumbnail').each(function() {
    $('.thumbnail').mousemove(function(e) {
        $(".pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10);
    });
});

这个函数没有错误，但它只显示最后一个Product的弹出窗口，这似乎是合乎逻辑的，因为它无法识别指定Product的div。所以我的问题是，我如何实现我想要的功能（每个产品都有特殊的弹出窗口）？有什么想法吗？谢谢：）

我通过构建一个fiddle来更新这个答案，以显示一个有效的解决方案。在未来，你能在可能的情况下提供一个Fiddle吗，因为它为我们节省了很多时间，为自己建造一个。

这是我的JavaScript:

// Note, this is important
$(document).ready(function () {    
    // We don't need an each, and include the e event handler
    $('.thumbnail').hover(function (e) {
        $('#pop-up').show()
            .css('top', e.pageY + 20)
            .css('left', e.pageX + 10)
            .appendTo('body');
    }, function () {
        $('#pop-up').hide();
    });
    $('.thumbnail').mousemove(function (e) {
        $("#pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10);
    });
});

您还应该注意的是：您不需要在同一个元素上同时具有ID #pop-up和类.popup，除非这是从标准弹出式类继承的一些特殊弹出式。看起来您的ID/Class使用可能已关闭，所以只要确保在某个事物唯一时使用ID，在有多个实例时使用类即可。

我做了几个修复：

  • Always将jQuery包装在$(document).ready()方法中，这将确保在应用事件之前已完全加载DOM
  • 您忘记在hover函数中包含一个事件处理程序，尽管我认为您已经更新了问题

您忘记在悬停事件上传递事件对象参数

//do this 
...
$(this).hover(e){
  --
}
...

希望这能奏效。

如果你注意到你使用了（e.pageX），那么（e）从哪里来。它必须作为参数传递

相关文章：