Question

我是javascript的新手，并且遇到了我的ASP.NET MVC 4应用程序的问题。当用户将鼠标悬停在该项目的技能类别上时，我想动态显示项目的技能列表（在类别中）。这是我的两个问题：

1 现在，jquery将弹出局部视图（现在基本上是空白的），但是当我将鼠标从弹出窗口移开时，它仍然存在。我必须单击关闭按钮以摆脱弹出窗口。我也尝试过mouseleave和mouseout。当我离开时，为什么弹出窗口没有关闭？

2 如何在弹出窗口中获取项目技能列表？每个类别中可以有0个或多个技能，我想在他们自己的项目技能类别弹出窗口中显示它们（即如果用户将鼠标悬停在与项目1相关的软技能图像上，它将弹出一个窗口，项目1）的softSkills。

这是Razor视图：

<link href="../Content/popup-project-skills.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../Scripts/popup-project-skills.js"></script>

@foreach (var item in Model) {
    <tr class="project-in-list">
        <td>
            @Html.ActionLink(item.name, "Details", new { id = item.id })
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.locationName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.status)
        </td>

        <td align=center class="btn"><img src="../../Content/images/check.png" style="visibility: @(item.hasProgrammingSkills ? "visible" : "hidden") "/></td>
        <td align=center class="btn"><img src="../../Content/images/check.png" style="visibility: @(item.hasSoftSkills ? "visible" : "hidden") "/></td>

        <!-- I WANT THESE IN THE POPUP INSTEAD OF PRINTING THEM IN A NEW COLUMN -->
        <td>
            @foreach(var skill in item.programmingSkills)
            {
                @Html.DisplayFor(modelItem => skill.skillName)
                @Html.Raw("; ")
            }
            @foreach(var skill in item.softSkills)
            {
                @Html.DisplayFor(modelItem => skill.skillName)
                @Html.Raw("; ")
            }
        </td>

    </tr>
}

这是我正在使用的JavaScript：

function loadPopup()
{
    $("#backgroundPopup").css({"opacity": "0.1"});
    $("#backgroundPopup").fadeIn("fast");
    $("#popupContact").slideDown("fast");
}
function disablePopup()
{
    $("#backgroundPopup").fadeOut("slow");
    $("#popupContact").slideUp("fast");
}
function centerPopup()
{
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    $("#popupContact").css({"position": "absolute","top": windowHeight/2-popupHeight/2,"left": windowWidth/2-popupWidth/2});
    $("#backgroundPopup").css({"height": windowHeight});
}

$(document).ready(function()
{
    $(".btn").mouseover(function()
    {
        centerPopup();
        loadPopup();
    });

    $("#btn").mouseout(function ()             // this does not work -> not sure why
    {
        disablePopup();
    });

    $("#popupContactClose, .c_btn").click(function()
    {
        disablePopup();
    });
});

Answer 1

您是否考虑使用jquery UI's tooltip对象而不是弹出窗口？

我认为这将是一个更简单的解决方案。

Answer 2

回答问题1：尝试更改：

$("#btn").mouseout(function ()

为：

$(".btn").mouseout(function ()

#用于id选择器，而.用于类选择器。您尚未为这些按钮分配ID，仅为类分配。

问题2：说实话，我无法回答我的第二个问题，我无法在工作中查看这些东西。

Answer 3

您应该在js

.btn

#btn

尝试将您的问题拆分为几个较小的问题。如果我理解你，你可以尝试这样的思考：对于每个模型项，你应该创建一个id为"softSkills" + item.id的隐藏div。然后每次将此id的内容插入到popup div元素中，jQuery就像版本：$('#popupDiv').html($('#softSkills1'))。
不要使用内联css和js
<td align="center" /> - 这个不推荐使用，并且不再使用任何响应css / less / sass / scss / compass等样式的样式。样式表文件
对于未来：剃刀是丑陋的，有点儿，当你试图了解它如何以及为什么它不适用于大模型结构时，你会头疼。简单的HTML，Ajax和jsTemplate引擎是未来，更便于移植和调试

鼠标移动弹出局部视图，鼠标移出隐藏

3 个答案: