如何從調用函數的元素中將參數傳遞給javascript函數？

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標記 ：

<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 ，它與DOM的其他elements無關

演示版

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標簽的結構，即； 如圖所示制作標簽

<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()

}）

Answer 4

嘗試這個

函數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); }