3

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

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

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

这是剃刀视图：

<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();
    });
});
4

3 回答 3

2

您是否考虑过使用jquery UI 的工具提示对象而不是弹出窗口？

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

于 2013-07-15T18:52:59.653 回答
2

问题 1 的答案：尝试更改：

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

至：

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

#用于 id 选择器，而.用于类选择器。您没有为这些按钮分配 id，只有类。

问题 2：老实说，我无法在脑海中回答第二个问题，而且我无法在工作中获得要测试的东西。

于 2013-07-15T18:53:03.543 回答
0
  1. 您应该.btn在#btnjs 处使用
  2. 尝试将您的问题分成几个较小的问题。如果我理解正确，你可以尝试这样的想法：对于每个模型项目，你应该创建一个隐藏的 div，id 像这样"softSkills" + item.id。然后每次将这个 id 的内容插入到你弹出的 div 元素中，jQuery like version: $('#popupDiv').html($('#softSkills1'))。
  3. 不要使用内联 css 和 js
  4. <td align="center" />- 这个已被弃用，并且再次不要使用任何响应 css/less/sass/scss/compass 等之外的样式的东西。样式表文件
  5. 面向未来：razor 丑陋、有缺陷，有时当您尝试了解它如何以及为什么不适用于大型模型结构时，您会感到头疼。纯 HTML、Ajax 和 jsTemplate 引擎是未来，并且在可移植性和调试方面更好
于 2013-07-15T20:07:37.187 回答