Question

我正在尝试为页面编写代码：显示一个按钮和嵌入的YouTube视频，一旦用户点击它，他就会转到一个链接（不是youtube），视频就会消失。还有一个按钮可以删除视频。我设法让视频可以点击链接，但是视频没有被删除的问题 - 不是在点击时而是在点击按钮时没有。

＆＃13;

.the-click {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: white;
  opacity: 0;
}
.container {
  position: relative;
}
.myxButton {
  -moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
  -webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
  box-shadow: inset 0px 1px 0px -1px #cf866c;
  background-color: #d0451b;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #942911;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
  background-color: #bc3315;
}
.myxButton:active {
  position: relative;
  top: 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <button class="myxButton" onclick=$( '#div1').remove();>« Stop Video »</button>
  <div id="div1" align="center" class="container" onclick=$( '#div1').remove();>
    <a href="http://www.google.com " class="the-click" target="_blank"></a>
    <iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&amp;autoplay=1&amp;controls=0&amp;fs=0&amp;rel=0&amp;showinfo=0&amp;disablekb=1&amp;wmode=opaque" frameborder="0"></iframe>
  </div>
</center>

＆＃13;

Console result when clicking

我也尝试过：

onclick="$('#div1').remove();"
onclick='$('#div1').remove();'
#same with# onclick=$('#div1').hide();

由于

Answer 1

使用此语法。从按钮中删除内联onClick属性并使用jquery添加事件侦听器。

您的按钮HTML应该只是

 <button class="myxButton">« Stop Video »</button>

要求删除内联属性的原因是因为它已被弃用（但仍然很少有浏览器支持它），但将来几乎所有浏览器都会停止支持它。这样我们就可以将HTML和JavaScript代码分开，这有利于维护。

这是一个工作片段。

＆＃13;

$('.myxButton').on('click',function(){
  $('#div1').remove();
});

＆＃13;

.the-click {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: white;
  opacity: 0;
}
.container {
  position: relative;
}
.myxButton {
  -moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
  -webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
  box-shadow: inset 0px 1px 0px -1px #cf866c;
  background-color: #d0451b;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #942911;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
  background-color: #bc3315;
}
.myxButton:active {
  position: relative;
  top: 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<center>
  <button class="myxButton">« Stop Video »</button>
  <div id="div1" align="center" class="container">
    <a href="http://www.google.com " class="the-click" target="_blank"></a>
    <iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&amp;autoplay=1&amp;controls=0&amp;fs=0&amp;rel=0&amp;showinfo=0&amp;disablekb=1&amp;wmode=opaque" frameborder="0"></iframe>
  </div>
</center>

＆＃13;

删除Div不工作

1 个答案: