javascript - jQuery 显示/隐藏在 WordPress 中不起作用

Question

我对此一无所知，因为我是初学者，我为 WordPress 创建了这个模板，我的客户希望在您单击每个图像上相应的播放按钮时显示 YouTube 视频:

http://oxfordandregentstreet.com/

现在这是我为其编写的代码:

在标题上我放置了这个函数

   enter code here

  <div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  On the header I put this function

  <script  type="text/javascript">
  jQuery(document).ready(function(){

  jQuery(".play1").click(function(){
   jQuery(".vid1").show();
  });


  jQuery(".closevid, this").click(function(){
   jQuery(".vid1").hide();
  });
 
	});
  </script>
enter code here

 </code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> CSS code on the css file
.vid1{
position: absolute;
bottom: -1.5em;
left: .3em;
}



.videos{
 position: relative;
 display: none;

}


.play1{
position: relative;
bottom: 9em;
left: 8em;
}


enter code here</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>HTML code on the page:

<script     
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<table border="0" align="center">
  <tbody><tr>
    <td><img src="/wp-content/uploads/2015/02/Constant-Contact-  290x190.png" alt=""><a href="#" ><img src="/wp-content/themes/Oxford/images/Play-1-Normal-Red-icon.png" alt=""  width="" class="play1"></td>
  
  </tr>
  </tbody></table></div>

   <div class="videos">
   <div class="vid1"><a href="#" class="closevid">Close X</a><iframe   width="960" height="705" src="https://www.youtube.com/embed/1wVD0I2zQBw"  frameborder="0" allowfullscreen></iframe></div>
    </div></code></pre>
</div>
</div>

我在第一个播放按钮上测试了此代码，但没有任何反应，chrome 的控制台没有显示任何错误，并且我正在使用“使用 Google Libraries”来包含该代码。

你能帮我解决这个问题吗？我在互联网上研究了好几天，但没有找到任何解决方案。

提前致谢:)

Answer 1

我可以看到一些问题:

CSS

从 .videos 中删除 display: none;，因为您始终隐藏该容器内的所有内容。相反，更改现有的 CSS 以包含它:

.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
    position: absolute;
    bottom: -1.5em;
    left: .3em;
    display: none; /* added here */
}

代码

播放按钮类是 play1 因此，显示 vid1 的代码应该是:

jQuery(".play1").click(function (e) {
  e.preventDefault(); 
  jQuery(".vid1").show();
});

关闭按钮已经位于 vid1 内，因此只需在单击 vid1 内的 closevid 时隐藏容器即可:

jQuery(".vid1 .closevid").click(function (e) {
  e.preventDefault();
  jQuery(".vid1").hide();
});