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>

我想要这个：
当鼠标悬停在<li>“liitem”类的元素上时，然后设置 display:block 具有相同 id 的跨度（在本例中为 183 ）。

我已经编写了这段代码，但它不完整，我不知道该怎么做：

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 回答