Javascript循环函数（i）_Javascript_Html

Javascript循环函数（i）

javascript html

Javascript循环函数（i）,javascript,html,Javascript,Html,我是新手。我尝试这个例子来测试代码，当单击每个p时，部分文本将替换为“yeah” 单击第一个p时，将替换第一个截面单击第二个p时，第二部分将被替换。。。代码是这样的 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>p{text-align: center;}</style> &

我是新手。我尝试这个例子来测试代码，当单击每个p时，部分文本将替换为“yeah” 单击第一个p时，将替换第一个截面单击第二个p时，第二部分将被替换。。。代码是这样的

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
<style>p{text-align: center;}</style>
</head>
<body>
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
<script>
var x = document.getElementsByClassName("test")
var y = document.getElementsByTagName("section")
for(i=0;i<y.length;i++){
 y[i].setAttribute("class","linktest")
}
var z = document.getElementsByClassName("linktest")
function place(a){
 z[a-1].innerHTML="yeah"
}

for(i=0;i<x.length;i++){
 x[i].addEventListener("click", function(){
place(i+1)})
}

</script>


</body>
</html>

它工作了，但我想缩短代码，因为真正的工作有超过100项

Help plz

您正在for循环外调用

place（）

函数。因此，

的值总是

尝试这种方法，首先将索引分配给每个元素，然后将其传递给

place（）

函数

var x=document.getElementsByClassName（“测试”）；
var y=document.getElementsByTagName（“节”）；
对于（i=0；i


您好
如何


今天
安全气囊系统
好的
伟大的
杰出的
好
最好的
更好
@Chaska的答案很好，但由于您提到将有超过100个项目，因此重要的是避免为每个元素添加事件侦听器以获得更好的性能。相反，将所有p
标记包装在div
中，并将单个事件侦听器添加到div
标记中。下面是一个稍微修改过的代码

var x=document.getElementsByClassName（“测试”）；
var y=document.getElementsByTagName（“节”）；
对于（i=0；i


您好
如何


今天
安全气囊系统
好的
伟大的
杰出的
好
最好的
更好这能回答您的问题吗？谢谢你，兄弟
x[0].addEventListener("click",function(){place(1)})
x[1].addEventListener("click",function(){place(2)})
x[2].addEventListener("click",function(){place(3)})
x[3].addEventListener("click",function(){place(4)})
x[4].addEventListener("click",function(){place(5)})
x[5].addEventListener("click",function(){place(6)})