0

同じJavaScript 関数<li>を呼び出すアイテムがいくつかあります。関数は、それを呼び出す要素からいくつかのデータを抽出して、いくつかの変数と変数onmouseoverを埋める必要があります。このデータは、以下の html コードでは大文字で入力されています。これを行う方法についてのアイデアは本当に感謝しています。nametel

私の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

はい、あなたはこのようなことをします

ジャバスクリプト：

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う。eventelementsDOM

デモ

于 2013-07-20T07:52:12.757 に答える
1

2 つのことをお勧めします。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 をフェッチしようとすると、強力なタグが渡されるため、変更した方がよいためです)

また、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 に答える