0

我有许多<li>项目，它们调用相同的onmouseoverjavascript 函数。该函数需要从调用它的元素中提取一些数据，以填充一些name和tel变量。该数据在下面的 html 代码中以大写形式输入。任何关于如何做到这一点的想法都非常感谢。

我的 HTML：

<li id="item1" onmouseover= "onmouseoveragent(this)" >
<a href="some link">
    <span class="hideme">name</span>
</a>
    <p class="hideme"> NAME TO BE PASSED TO JS
    <strong class="tel">NUMBER TO BE PASSED TO JS</strong>
</p>
</li>

我的JavaScript：

<script language="javascript" type="text/javascript">
    function onmouseoveragent(e) {
        var name = e.?????;
    var tel = e.?????;
};
</script>
4

4 回答 4

3

是的，你做这样的事情

JAVASCRIPT：

var elements = document.getElementsByClassName('data-item');

var mouseoverHandler = function() {
   var name = this.getElementsByClassName('name')[0].textContent,
       tel = this.getElementsByClassName('tel')[0].textContent;
    alert('Name - ' + name + "\nTel - " + tel);
}

for( var i = 0; i < elements.length; i++ ) {
     var current = elements[i];
     current.addEventListener('mouseover', mouseoverHandler);
}

HTML 标记：

<li id="item1" class="data-item"> 
    <a href="some link">
        <span class="hideme">name</span>
    </a>

    <p class="hideme">
        <span class="name">John Smith</span>
        <strong class="tel">555-666-777</strong>
    </p>
</li>

<li id="item1" class="data-item"> 
    <a href="some link">
        <span class="hideme">name</span>
    </a>

    <p class="hideme">
        <span class="name">Caprica Smith</span>
        <strong class="tel">545-334-641</strong>
    </p>
</li>

MDN - document.getElementsByClassName();

MDN - element.textContent

不会是e.something因为e指的event是刚刚发生的，与其他无关elements的DOM

演示

于 2013-07-20T07:52:12.757 回答
2

好吧，有一种更简单的方法可以做到这一点，只需遍历当前悬停元素的 childNodes 并解析结果。这是下面片段的工作JSFiddle（是的，它适用于与该结构匹配的所有 LI）：

function onmouseoveragent(e) {
    var children = this.childNodes,
        name = null,
        tel = null;
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        if (child.tagName === 'P') {
            name = child.firstChild.nodeValue; // the first node is the text node
            tel = child.childNodes[1].firstChild.nodeValue; // the strong's text node
            break; // let's stop the iteration, we've got what we needed and the loop has no reason to go on
        }
    }
    console.log(name, tel); // "NAME TO BE PASSED TO JS " "NUMBER TO BE PASSED TO JS"
}

HTML 中的唯一区别是您需要以这种方式传递您的处理程序：

<li id="item1" onmouseover="onmouseoveragent.call(this, event)">

因此this，处理程序内部将引用元素而不是全局对象。

于 2013-07-20T08:25:30.973 回答
1

我建议你做两件事，一是改变你 li 标签的结构，即；制作如图所示的标签

<li id="item1" class="someClass" >
<a href="some link">
<span class="hideme">name</span>
</a>
<p class="hideme">NAME TO BE PASSED TO JS </p>
<strong class="tel">NUMBER TO BE PASSED TO JS</strong>
</li>

从 p 中删除 strong ，因为当您尝试获取 p 时（要传递的数据，strong 标签将随之而来，因此最好更改它）

并尝试 jquery 它会给你更多的灵活性和易用性（我的感觉）

$(".someClass").mouseover(function(e){
    var name = $(e.target).find("p:first").html()
    var tel = $(e.target).find("strong:first").html()

})

于 2013-07-20T09:34:32.830 回答
0

尝试这个

功能 onmouseoveragent(e) {

    var text = e.getElementsByClassName('hideme')[1].textContent;
      var name = text.split("\n")[0];     var num = text.split("\n")[1];  alert(name);    alert(num); }
于 2013-07-20T08:15:41.573 回答