for循环函数中的参数

Question

我正在做这个代码，但它需要时间，因为它将是h1直到h24所以我决定使用for循环，但我不知道如何..

这是我的原始代码

function hover(h1,h2,h3,h4){
  document.getElementById(h1).style.backgroundColor="orange";
  document.getElementById(h2).style.backgroundColor="orange";
  document.getElementById(h3).style.backgroundColor="orange";
  document.getElementById(h4).style.backgroundColor="orange";
}

我希望将其替换为

function hover(
  for(i = 1; i<=24; i++) {
    document.write("h"+i+",");
  }
)

但是有错误..请帮帮我..谢谢

Answer 1

function hover() {
    for(var i = 1; i < 25; i++) {
        document.getElementById("h" + i).style.backgroundColor="orange";
    }
}

如果您需要更多控制，可以将上限设置为参数，例如

function hover(limit) {
    for(var i = 1; i <= limit; i++) {
        document.getElementById("h" + i).style.backgroundColor="orange";
    }
}

调用hover(10);会改变h1到h10的背景颜色。

Answer 2

您需要使用Javascript的arguments对象

function hover() {
    var args = Array.prototype.slice.call(arguments);
    var length = args.length;

    for (var i = 0; i < length; i++) {
        document.getElementById(args[i]).onmouseover = 
            function () { this.style.backgroundColor = "orange"; }
        document.getElementById(args[i]).onmouseout = 
            function () { this.style.backgroundColor = "transparent"; }
    }
}

---

jsFiddle Demo

<强> HTML：

<div id="h1">A</div>
<div id="Hello">B</div>
<div id="box">C</div>
<div id="World">D</div>

JS致电：

hover("h1", "Hello", "box", "World");

Answer 3

这是我的建议：

<div id="h1">test</div>
<div id="h2">test</div>
<div id="h3">test</div>
<div id="h4">test</div>

脚本，请注意dummy变量

<script>
function hover(dummy){
    for (var i=0; i<arguments.length; i++) {
        var element = document.getElementById(arguments[i]);
        element.onmouseover = function() {
            this.style.backgroundColor="orange";
        }
        element.onmouseout = function() {
            this.style.backgroundColor="white";
        }
    }
}

//hover('h1','h2','h3','h4');
for (var i=1;i<=24;i++) {
   hover('h'+i);
}
</script>

Answer 4

您发布的代码存在一些问题。我想我理解你试图解决的问题。尝试这样的事情：

function hover(eleId){
  document.getElementById(eleId).style.backgroundColor="orange";
}
for(i=1; i<=24; i++){
  hover("h"+i.toString());
}

另请注意，h1，h2，h3看起来都像HTML标签。查看getElementsByTagName。