Question

我对asp.net和javascript非常陌生，我应该在几天内完成以下任务。我知道在询问之前我必须学习所有的基础知识，但实际上我不知道在短时间内到哪里得到我需要的东西。非常感谢提前！

以下是一些城市，将在国家/地区地图上显示：每个城市都有自己的风格（因为城市位置不同），在css。

中定义

<div class="node">
    <div class="taxonomy">
    </div>
    <div class="content">
        <div id="contact_map" runat="server">
            <ul>
                <li id="city1" onmouseover= "onmouseoveragent(this)"   
                               onmouseout="onmouseoutagent(this)">
                    <a href="someAddress"><span class="hideme">Some City Name</span>
                    </a>
                    <p class="hideme">Some City Name<strong class="tel">0123456789</strong>
                    </p>
                </li>
                <%-- other cities here, with different city name and tel --%>
            </ul>
        </div>
    </div>
</div>

我可能会试着弄清楚如何在以后动态创建这些城市物品。

下面是一个提示框，当鼠标在城市上空时显示。所有城市都必须重复这一过程。（问题1：如何动态创建这些提示框，并以某种方式填充与正确城市相关的信息？也许我必须动态创建以前的列表..）

<div id="agentVisit" class="floating-tip-wrapper" style="margin: 0px; padding: 0px; position:    
    absolute; display:none; opacity: 1;">
    <div class="floating-tip" style="margin: 0px;">Some City Name
        <strong class="tel">0123456789</strong>
    </div>
</div>

这是每个城市的onmouseover和onmouseout的javascript代码：（问题2：如何判断agentVisit获取的功能？）

<script language="javascript" type="text/javascript">

    function onmouseoveragent(e) {
        var hint = document.getElementById("agentVisit");
        console.log(hint);
        hint.style.display = 'block';
        hint.style.top = Math.max(e.offsetTop - hint.offsetHeight, 0) + "px";
        hint.style.left = e.offsetLeft + "px";
    };

    function onmouseoutagent(e) {
        var hint = document.getElementById("agentVisit");
        hint.style.display = 'none';
    }

</script>

如果你提供一个关于如何做的想法（或者只是一般提示），我将不胜感激。或者只是指向快速教程的链接。谢谢！

Answer 1

我认为你使这种方式变得更加复杂，因为你可以利用DOM元素的数据短划线（data-）属性，然后使用像jQueryUI Tooltip这样的东西。

如何告诉javascript函数操作什么元素？

1 个答案: