javascript - for循环函数中的参数

Question

我正在做这段代码，但这需要时间，因为直到 h24 之前都是 h1，所以我决定使用 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

这是我的建议：

<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 2

您发布的代码有几处问题。我想我理解你试图解决的问题。尝试这样的事情：

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

还要注意 h1、h2、h3 都看起来像 HTML 标签。查看getElementsByTagName。

Answer 3

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 4

您需要使用 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 演示

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");