Javascript 选择一个视频div时隐藏所有视频div

我是Javascript的新手，很难为这个函数找到正确的代码

我有多个

div

s。每个

div

都有两个子

div

s，单击时可以交换

例如，第一个

div

是具有滚动效果的样式化图像。单击图像时，它将与

交换

然而，我正在尝试添加一些功能到这个。。。如果我单击另一个图像播放

，我希望另一个

视频

s停止并切换回原始图像

div

s

这是我正在测试的代码

函数SwapDivsWithClick（div1，div2）{
d1=document.getElementById（div1）；
d2=document.getElementById（div2）；
如果（d2.style.display==“无”）{
d1.style.display=“无”；
d2.style.display=“块”；
}否则{
d1.style.display=“块”；
d2.style.display=“无”；
}
}

视频内容


视频内容


视频内容

如何使用

document.getElementsByCassName（'showDiv'）

并循环遍历它们（如果元素id与

div1

参数匹配，则跳到循环的下一个迭代），然后在所有元素上设置

style.display='block'

。这将显示除id为

div1

的图像外的所有图像

然后使用

document.getElementsByClassName（'hideDiv'）

并循环遍历它们（如果元素id与

div2

匹配，则再次跳到下一个），并设置

样式。display='none'

。这将隐藏除

div2

的id之外的所有视频

这会将列表中的所有

div

重置为默认状态（无论有多少），然后您可以隐藏

div1

并显示

div2

，就完成了

此替换功能将完全满足您的要求：

function SwapDivsWithClick(div1, div2) {
  var d = document.getElementsByClassName('showDiv');
  for (i = 0; i < d.length; ++i) {
    d[i].style.display = (d[i].id == div1) ? 'none' : 'block';
  }
  d = document.getElementsByClassName('hideDiv');
  for (i = 0; i < d.length; ++i) {
    d[i].style.display = (d[i].id == div2) ? 'block' : 'none';
  }
}

函数SwapDivsWithClick（div1，div2）{
var d=document.getElementsByClassName（'showDiv'）；
对于（i=0；i

您是否愿意使用jQuery或其他DOM操作库？如果文件的重量不是问题，那么可以编写一些相对容易的方法来解决这个问题。在任何情况下，如果您使用原生JS，您可能希望将精力集中在循环通过DOM元素的能力上

下面是jQuery中的一个简单版本

$（'.toggler'）。打开（'click'，函数（e）{
e、 预防默认值（）；
var thisProjectVideo=$（this）.parents（'.projectmg'）.sides（'.projectVid'）；
var thisprojectmg=$（this）.parents（'.projectmg'）；
var allProjectVids=$（'.projectVid'）；
变量AllProjectMgs=$（'.projectMg'）；
AllProjectMgs.removeClass（'displayNone'）；
thisprojectmg.addClass（'displayNone'）；
allProjectVids.addClass（'displayNone'）；
thisProjectVideo.removeClass（'displayNone'）；
})

.displayne{
显示：无；
}

Img1

视频内容

Img2

视频内容

Img3

视频内容

嗯，这对我来说不太管用。。。单击Img1将隐藏Img2。在任何情况下，没有jquery的解决方案都是简单明了的。忘记添加了——我不是jquery向导，所以我不介意看到上面的代码得到更正，以便更好地理解。我以为目标是用户单击Img1、Img2和Img3隐藏？这是预期的功能。我做了跨浏览器检查，代码中没有错误，可能是我误解了这个问题？如果您能更详细地解释所需的功能，我可以重新编写代码（但如果本机答案对您有利，则无需）。我编写了本机答案，但我希望看到jquery解决方案。否，单击任何Img都会将其隐藏并显示视频容器，并在所有其他位置显示Img容器。请求者希望它像一个单选按钮一样工作，其中“开”状态是空的视频容器，“关”状态是Img1、Img2或Img3，一次只能有一个“开”。嗨，我看到你是这个社区的新手。如果你不介意的话，当你看到一个适合你的答案时，计票时有一个勾选标记，你可以将你的问题标记为已回答。