0

私のhtmlコードには、これらの<li>要素のリストがあります。

<li class="liitem" id="183"><span><a href="http://www.google.it"> Google </a> </span><br>
<ul><li><span><a href="http://www.gmail.com" target="_blank">gmail.com</a> </span><span id="183" style="float:right;display:none;"><a href="">delete</a></span></li></ul></li>

私はこれが欲しいです： 「liitem」クラス
の要素にマウスオーバーがあるとき<li>、同じID（この場合は183）でスパンのdisplay：blockを設定します。

私はこのコードを書きましたが、それは不完全であり、方法がわかりません。

var elms = document.getElementsByTagName('li');

for (var i = 0; i < elms.length; i++){
  if (elms[i].getAttribute('class') === 'liitem'){

    elms[i].onmouseover = function(){
      //set display:block
    }

    elms[i].onmouseout = function(){
      //set display:none
    }

  }
}
4

2 に答える 2

1

id同じ値でを設定した場合idは一意である必要があります。そのため、IDに値を追加して、IDとは異なる値にすることができますliitem's。お気に入り。

の間に安全なスペースがないことを確認してa and spanください。

<ul>
<li class="liitem" id="183"><span><a href="http://www.google.it"> Google </a> </span><br>
<ul><li><span><a href="http://www.gmail.com" target="_blank">gmail.com</a></span><span style="float:right;display:none;"><a href="">delete</a></span></li></ul>
<ul><li><span><a href="http://www.google.com" target="_blank">docs</a></span><span style="float:right;display:none;"><a href="">delete</a></span></li></ul>
</li>
</ul>

。

var elms = document.getElementsByTagName('li'),
emls_len = elms.length;

for (var i = 0; i < emls_len; i++){

if (elms[i].className == 'liitem'){

var arr_sub_uls = document.getElementById(elms[i].id).getElementsByTagName('ul');

// for each UL within the liitem 
for (var j = 0; j < arr_sub_uls.length; j++){

// assign id's to the span around delete
var actionis = arr_sub_uls[j].childNodes[0].childNodes[1].id = elms[i].id + "_" + j;     // elms[i].id is the liitem id and j is the number of uls'

// attach the event handler
addEventHandler(arr_sub_uls[j].childNodes[0],actionis)

}
}
}


function  addEventHandler(s, actionis){
s.onmouseover = function(){ document.getElementById(actionis).style.display = "block" }
s.onmouseout = function(){ document.getElementById(actionis).style.display = "none" }
}

フィドルを参照してください：http：//jsfiddle.net/EW2cm/1/

于 2012-04-26T21:31:22.777 に答える
0

あなたはこれを行うことができます：

elms[i].style.display = "block";

と

elms[i].style.display = "none";
于 2012-04-26T20:44:45.863 に答える