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

Question

我是 asp.net 和 javascript 的新手，我应该在几天内完成以下任务。我知道在询问之前我必须学习所有基础知识，但真的不知道在短时间内从哪里得到我需要的东西。非常感谢!

以下是一些城市，它们将显示在国家 map 上:每个城市都有自己的风格(因为城市位置不同)，在 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 的东西.