Fatal编程技术网
  • javascript/
  • onClick javascript函数只显示包装器的第一个子级

onClick javascript函数只显示包装器的第一个子级

javascript function

onClick javascript函数只显示包装器的第一个子级,javascript,function,onclick,selector,elements,Javascript,Function,Onclick,Selector,Elements,这些天我在学习javascript，我的代码有点问题 我在页面wrapper1、wrapper2和wrapper3上有三个元素，每个元素都有它的触发器和redbox元素 我的目标是当按下触发器时，它将显示与数字对应的红色框元素 示例： 在wrapper1元素中单击trigger1将显示redbox1元素， trigger2内部wrapper2元素显示redbox2元素等 问题是，例如，当我单击trigger3时，它总是显示redbox1元素。（如示例所示） 我做错了什么？我只是个乞丐 函数sh

这些天我在学习javascript，我的代码有点问题

我在页面
wrapper1
、
wrapper2
和
wrapper3
上有三个元素，每个元素都有它的
触发器和
redbox
元素

我的目标是当按下
触发器
时，它将显示与数字对应的
红色框
元素

示例：
在
wrapper1
元素中单击
trigger1
将显示
redbox1
元素，

trigger2
内部
wrapper2
元素显示
redbox2
元素等

问题是，例如，当我单击
trigger3
时，它总是显示
redbox1
元素。（如示例所示）

我做错了什么？我只是个乞丐



函数showTheRedBox（）{
var theRedBox=document.getElementsByClassName（'redbox'）；
theRedBox[0]。style.display='block'；
}


body{背景：#222；}
.包装纸{
背景：黄色；
宽度：100px；
高度：100px；
}
.扳机{
背景：蓝色；
宽度：50px；
高度：50px；
位置：绝对位置；
边缘顶部：50px；
左边距：50像素；
}
雷德博克斯先生{
背景：红色；
宽度：200px；
高度：100px；
左边距：100px；
位置：绝对位置；
显示：无；
}



触发器1
万岁
包装1
触发器2
万岁
包装2
触发器3
万岁

wrapper3
您可以使用for循环和闭包来访问每个onclick事件的
.wrapper
信息。无论是否有相同数量的子项，此方法都有效，并且始终显示正确的子项

此外，最好不要使用内联JavaScript属性（例如，
onclick=“showTheRedBox（）；”
），您应该始终在脚本中分配事件处理程序，以确保可读性和可维护性


var wrappers=document.queryselectoral（'.wrapper'），i；
var redbox=document.querySelectorAll（'.redbox'）；
对于（i=wrappers.length-1；i>=0；--i）{
（函数（包装器）{
wrapper.querySelector（'.trigger'）。onclick=function（）{
希德尔（）；
wrapper.querySelector（'.redbox'）.style.display='block'；
}
})（包装纸[i]）；
}
函数hideAll（）{
对于（i=redbox.length-1；i>=0；--i）{
红盒[i].style.display='none'；
}
}




var wrappers=document.queryselectoral（'.wrapper'），i；
var redbox=document.querySelectorAll（'.redbox'）；
对于（i=wrappers.length-1；i>=0；--i）{
（函数（包装器）{
wrapper.querySelector（'.trigger'）。onclick=function（）{
希德尔（）；
wrapper.querySelector（'.redbox'）.style.display='block'；
}
})（包装纸[i]）；
}
函数hideAll（）{
对于（i=redbox.length-1；i>=0；--i）{
红盒[i].style.display='none'；
}
}


body{背景：#222；}
.包装纸{
背景：黄色；
宽度：100px；
高度：100px；
}
.扳机{
背景：蓝色；
宽度：50px；
高度：50px；
位置：绝对位置；
边缘顶部：50px；
左边距：50像素；
}
雷德博克斯先生{
背景：红色；
宽度：200px；
高度：100px；
左边距：100px；
位置：绝对位置；
显示：无；
}



触发器1
万岁
包装1
触发器2
万岁
包装2
触发器3
万岁

wrapper3
您遇到的问题是“getElementsByClassName”方法返回一个包含该类所有元素的数组。因此，当您在何处执行此操作时：


theRedBox[0].style.display = 'block'


您正在更改数组的第一个元素的显示样式，在本例中为“wrapper1”

下面是一个修改版本，它与其他包装器一起工作：


<!DOCTYPE html>
<html lang = 'es'>
    <head>
        <title> MY TEST </title>
        <style>
            body {
                background: #222;
            }
            .wrapper {
              background: yellow;
              width: 100px;
              height: 100px;
            }
            .trigger {
              background: blue;
              width: 50px;
              height: 50px;
              position: absolute;
              margin-top: 50px;
              margin-left: 50px;
            }
            .redbox {
              background: red;
              width: 200px;
              height: 100px;
              margin-left: 100px;
              position: absolute;
              display: none;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
          <div class="trigger" onclick="showTheRedBox(0)">trigger1</div> <!-- When the onClick event is trigered the function "showTheRedBox receives a parameter , that parameter is the position of the element in the Array "theRedBox"-->
          <div class="redbox">hurrah1</div>
        wrapper1
        </div>

        <div class="wrapper">
            <div class="trigger" onclick="showTheRedBox(1)">trigger2</div>
            <div class="redbox">hurrah2</div>
        wrapper2
        </div>

        <div class="wrapper">
              <div class="trigger" onclick="showTheRedBox(2)">trigger3</div>
              <div class="redbox">hurrah3</div>
        wrapper3</div>

        <script>

            function showTheRedBox(wrapperNumber) {
                  var theRedBox = document.getElementsByClassName('redbox');
                  theRedBox[wrapperNumber].style.display = 'block';
                }
        </script>
    </body>
</html>




我的测试
身体{
背景：#222；
}
.包装纸{
背景：黄色；
宽度：100px；
高度：100px；
}
.扳机{
背景：蓝色；
宽度：50px；
高度：50px；
位置：绝对位置；
边缘顶部：50px；
左边距：50像素；
}
雷德博克斯先生{
背景：红色；
宽度：200px；
高度：100px；
左边距：100px；
位置：绝对位置；
显示：无；
}
触发器1
万岁
包装1
触发器2
万岁
包装2
触发器3
万岁
包装纸3
函数显示对话框（包装器编号）{
var theRedBox=document.getElementsByClassName（'redbox'）；
theRedBox[wrapperNumber].style.display='block'；
}

谢谢你的回答，在我的网站上应用时一切正常，但我对这些代码有点迷茫，我无法正确理解这些“I”和“for”。但是，请您解释一下，当我悬停在trigger1之外时，如何隐藏第一个示例的redbox1（wrapper1、trigger1和redbox1）。
querySelectorAll（selector）
返回与提供的CSS选择器匹配的元素的节点列表。要将事件处理程序应用于节点列表中的每个元素，必须使用
for
循环来“循环”元素。如果我正确理解你其余的评论，你想吗？是的，我的意思是这样！现在你能给我再举一个例子吗？当你离开包装器时，它会隐藏红盒子？谢谢，我不知道为什么，但在我的网站和liveweave中，它只对第一个包装器起作用。第二，不隐藏内容。我不知道是谁否决了这一点，但它是有效的，而且很简单。非常感谢。