0

我对 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);
    });
});

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

4

2 回答 2

1

我已经通过构建一个小提琴来更新这个答案来显示一个有效的解决方案。将来，您能否在可能的情况下提供一个 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，并且在您有多个实例时使用类。

我做了几个修复：

  • 始终将您的 jQuery 包装在一个$(document).ready()方法中，这将确保您的 DOM 在应用事件之前已完全加载
  • 您忘记在您的hover函数中包含一个事件处理程序，尽管我认为您已经使用包含的内容更新了您的问题。
于 2013-08-01T08:27:39.243 回答
0

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

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

希望这应该有效。

如果你注意到你使用了 (e.pageX) 那么 (e) 来自哪里。它必须作为参数传递。

于 2013-08-01T08:31:05.020 回答