0

我在使用 jQuery 和 ASP.NET MVC 4 制作小功能时遇到了一点问题。

我有一个缩略图列表，它代表我的应用程序中的产品列表：

<ul class="thumbnails">
                @foreach (var thumbnail in Model.ForfaitsInThumbNail)
                {
            <!-- Now I Display Some infos about the thumbnail -->
            <!-- This is the Dialog that I want to display when the cursor is hover every thumbnail -->
            <div class='pop-up' id='pop-up'><h3>"@thumbnail.Forfait.Titre"</h3><p>"@thumbnail.Forfait.Description"</p></div>
                    </div>
            <!-- This simply displays a description and the title of every product -->
                }
</ul>

好吧，我有一个 jQuery 函数，它显示自定义的弹出菜单以显示每个产品的特定标题和描述：

<script type="text/javascript">   
    $('.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);
    });
</script>

所以这个函数运行良好，但它并不能满足我的所有需求，因为它只显示最后一个缩略图的标题和描述，但我需要一个函数来缩小每个具有“缩略图”的div并显示它的特定标题和描述. 有任何想法吗 ？我会非常感谢你的帮助:)

编辑

这是我建议的新功能：

<script type="text/javascript">   
    $('.pointHere').hover(function (e) {
        $(this).children('.pop-up').show()
            .css('top', e.pageY + 20)
            .css('left', e.pageX + 10)
            .appendTo('body');
    }, function () {
        $(this).children('.pop-up').hide();
    });
    $('.pointHere').mousemove(function (e) {
        $(this).children('.pop-up').css('top', e.pageY + 20).css('left', e.pageX + 10);
    });
</script>

我做了一个 div，它有一个类 pointHere，当我们单击它时，会显示子元素弹出窗口:) 效果很好:) 但是鼠标悬停功能不起作用，悬停功能也不会隐藏弹出窗口-up 当鼠标没有悬停在 pointHere div 时。

4

1 回答 1

1

问题在于 id pop-up。它不是唯一的。您的所有缩略图都有相同的 ID

与其绑定hoveron .thumbnail，不如绑定它.pop-up并使用它this来获取该 div

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

此外，您的 HTML 很糟糕。您的弹出 div 关闭了两次。

于 2013-08-11T08:12:59.703 回答