Demo

Question

我有许多<li>项，它们调用相同的onmouseover javascript函数。该函数需要从调用它的元素中提取一些数据，以填充一些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>

Answer 1

是的，你做这样的事情

<强> 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 MARKUP ：

<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无关。{{1}} }

Demo

Answer 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将引用该元素而不是全局对象。

Answer 3

我建议你改变你的标签结构两件事，即;使标签如图所示

<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时（要传递的数据，强标记会随之更新，因此请更改它）

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

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

}）

Answer 4

试试这个

function 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); }

如何从调用函数的元素将参数传递给javascript函数？

4 个答案:

Demo