Question

我正在制作一个有几个按钮的页面。按下按钮时，会显示div，其中包含嵌入的YouTube视频。再次按下按钮（或按“X”按钮）将关闭div。

此外，在按下按钮之前，iframe为空，因为div变为可见，iframe src也会被填写。这是因为该页面将包含超过15个嵌入视频，因此我不希望它们在首次加载页面时加载，因为这将永远需要。

我提出了以下脚本。在此示例中，ID为definitie1的elemend是放置iframe的div，而iframe本身的ID为frame1

function defineer1() {
    "use strict";
    var definitie = document.getElementById ("definitie1");
    var frame1 = document.getElementById ("frame1");

    if (definitie.style.display === "none"){
        definitie.style.display = "flex";
        frame1.src="https://www.youtube-nocookie.com/embed/lZ6P0nUh598?controls=0?enablejsapi=1&rel=0";
    } else {
        definitie.style.display = "none";
        frame1.src="";
    }
}

我通过JSlint运行它，只要我'假设浏览器'和'容忍空白混乱'它接受代码。

在页面上，我创建了按钮和隐藏的div，如下所示：

<div class="begrip" id="begrip1" onclick="defineer1()">
    <p class="begriptext" onclick="defineer1()">Distributieriem</p>
</div>
<div class="definitie" id="definitie1">
    <iframe id="frame1" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    <button class="wegknop" onclick="defineer1()">X</button>
</div>

这就是随之而来的CSS（至少出于测试目的）。

#begrip1 {
    width:150px;
    background-color:blue;
    color:white;
    height:50px;
    line-height:50px;
    text-align:center;
}

.definitie {
    display:none;
    background-color: blue;
    width:700px;
}

本身内部和外部都可以正常工作，但只要我创建另一个函数defineer2()以及相应的按钮和隐藏的div（如下所示），脚本就会开始运行。我仍然可以单击按钮并显示隐藏的div，然后在第二次单击时，div将消失，但之后，如果我单击按钮，它只会将style.display设置为{{1而不是none。因此，div不能再次显示。

JS为2个按钮和2个div：

flex

对应的CSS：

function defineer2() {
    "use strict";
    var definitie2 = document.getElementById("definitie2");
    var frame2 = document.getElementById("frame2");

    if (definitie2.style.display === "none") {
        definitie2.style.display = "flex";
        frame2.src = "https://www.youtube-nocookie.com/embed/n1uNzdn3ji0?controls=0&rel=0";
      } else {
        definitie2.style.display = "none";
        frame2.src = " ";
      }
  }

function defineer1() {
    "use strict";
    var definitie = document.getElementById("definitie1");
    var frame1 = document.getElementById("frame1");

    if (definitie.style.display === "none") {
        definitie.style.display = "flex";
        frame1.src = "https://www.youtube-nocookie.com/embed/lZ6P0nUh598?controls=0?enablejsapi=1&rel=0";
     } else {
        definitie.style.display = "none";
        frame1.src = "";
  }
}

和HTML：

#begrip2 {
    width:150px;
    background-color:red;
    color:white;
    height:50px;
    line-height:50px;
    text-align:center;
}

#begrip1 {
    width:150px;
    background-color:blue;
    color:white;
    height:50px;
    line-height:50px;
    text-align:center;
}

.definitie {
    display:none;
    background-color: blue;
    width:700px;
}

的jsfiddle 我试图在JSFiddle中创建它，但它似乎根本不起作用（虽然我可能只是错误地使用它）

摆弄一个按钮/ div：https://jsfiddle.net/004L2t8r/2/
摆弄两个按钮/ div：https://jsfiddle.net/zcecmhwq/1/

我尝试了什么？ 如上所述，我通过JSLint运行了我的代码。我为1个函数和几个函数做了这个，只要我选择'假设浏览器'和'容忍空白混乱'，它就接受我的代码。

此外，我已经使用了Firefox控制台，并确定它没有给出任何JS错误，我建立了该功能似乎不断改变<div class="begrip" id="begrip2" onclick="defineer2()"> <p class="begriptext" onclick="defineer2()">Balanceren</p> </div> <div class="definitie" id="definitie2"> <iframe id="frame2" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe> <button class="wegknop" onclick="defineer2()">X</button> </div> <div class="begrip" id="begrip1" onclick="defineer1()"> <p class="begriptext" onclick="defineer1()">Distributieriem</p> </div> <div class="definitie" id="definitie1"> <iframe id="frame1" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe> <button class="wegknop" onclick="defineer1()">X</button> </div>到style:display，而不是根本没有响应。

我使用Google，DuckDuckGo和SO来寻找答案，但找不到有同样问题的人却没有成功。

我考虑过在JQuery中这样做，因为这种做法可能不是最有效的，但我无法弄清楚如何在JQ中做到这一点，所以我认为我最好坚持使用vanilla JS。

更新在按照besciualex的建议添加none部分后，我收到了这些结果。我每次单击都会在日志中生成2行。

Answer 1

问题是您的点击事件气泡。点击后，首先点击p代码，然后点击父div。

您应该使用addEventListener从JS添加eventListeners，并使用event.stopPropagation()来阻止气泡效果。

JSFiddle

Answer 2

您不需要为类似的东西创建相同的功能。只需在函数中添加一个参数作为输入，如下图所示。然后你可以通过onclick="defineer1('https://google.com')"

来调用它

另外，我认为你的问题（仅在其他循环中被卡住）是因为在两个函数调用之后，definitie.style.display的值不是"none"而是其他东西。这就是我离开console.log电话的原因。

"use strict";

function defineer1(iframe_src) {
  var definitie = document.getElementById("definitie1");
  var frame1 = document.getElementById("frame1");

  console.log(definitie.style.display);

  if (definitie.style.display == "none") {
    definitie.style.display = "flex";
    frame1.src = iframe_src;
  } else {
    definitie.style.display = "none";
    frame1.src = "";
  }
}

如果我在1页上多次使用它，为什么这个JS函数不会多次工作？

2 个答案: