更改鼠标输入的类属性

Question

我在这个脚本上绞尽脑汁，因为我不明白为什么它不能工作，因为它应该非常简单，我只想显示和隐藏一个特定的div或者改变它的属性。

Javascript：

function show(x){
    var y = document.getElementByClassName(x);
    y.style.display= 'block';

}
function hide(x){
    var y = document.getElementByClassName(x);
    y.style.display = 'none';

}

HTML：

<a href='http://dreamspark.e-uvt.ro/dreamspark/'target='_blank'onmouseover='show('divdreamspark')'onmouseleave='hide('divdreamspark')'>

CSS：

.divdreamspark {
    display: none;
}

我不知道我做错了什么。

Answer 1

有多个问题：

1. 你把标记中的单引号搞乱了。
2. 在.getElementsByClassName部件中有一个带有缺少s的方法的错误。

更新标记：

<a href='http://dreamspark.e-uvt.ro/dreamspark/'target='_blank' 
   onmouseover='show("divdreamspark")' 
   onmouseleave='hide("divdreamspark")'>

更新js：

function show(x){
    var y = document.getElementsByClassName(x)[0]; // <---missing s in Element
    y.style.display= 'block';
}
function hide(x){
    var y = document.getElementsByClassName(x)[0]; // <---missing s in Element
    y.style.display = 'none';
}

如果元素是单个的，则在选择器处以[0]后缀(尽管类选择器返回集合)。如果您正在处理多个元素，那么您必须使用循环来迭代和隐藏其中的每个元素。

function show(x) {
  var y = document.getElementsByClassName(x);
  [].forEach.call(y, function(i, el) {
    el.style.display = 'block';
  });

}

function hide(x) {
  var y = document.getElementsByClassName(x);
  [].forEach.call(y, function(i, el) {
    el.style.display = 'none';
  });
}