jQuery-使用“ this”显示和隐藏具有一个功能的DIV

Question

I have Googled on this and not been able to suss it out. 我已经对此进行了Google搜索，但无法对此进行说明。 I'm somewhat experienced with jQuery but rusty. 我对jQuery有一定的经验，但是生疏了。

My goal is to display a grid of images. 我的目标是显示图像网格。 When an image is clicked, a hidden DIV will slide out and show text (Episode names and HTML5 audio player). 单击图像时，隐藏的DIV将滑出并显示文本（说明名称和HTML5音频播放器）。 Only one episode list should be shown at one time. 一次只能显示一个剧集列表。

Here's my code: 这是我的代码：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <script src="scripts/jquery-3.3.1.min.js"></script> <Title>Now Playing 10th Anniversary Set Disc 1 - 2013</Title> <meta charset="UTF-8"> </head> <style> div.table {border: 1px solid black; display: table; } div.tr {border: 1px solid black; display: table-row; padding: 15px;} div.td {border: 1px solid black; display: table-cell; padding: 15px; vertical-align: middle;} .EpisodeList { display: none; }</style> <script> $(document).ready(function() { $('#AvengersID').click(function() { $('#Avengers').animate({ height: 'toggle' }, 2000 ); }); $('#CarrieID').click(function() { $('#Carrie').animate({ height: 'toggle' }, 2000 ); }); }); </script> <Body> <center><Img src="images/NP-logo2016-10yrBug.png" border = 0><BR> <H2>Disc 1 - 2013</H2><P>(click on any logo to see and play the podcasts in that series released in 2013)</center> <P> <div class ="table"> <div class ="tr"> <div class = "td"> <Center><a id="AvengersID" href="javascript:showonlyone('Avengers');"><img src = "images/NP_ComicSeries_Avengers-Art-V2_300-2.jpg" width = "200"><BR>Avengers</center></a> <div class="EpisodeList" id="Avengers"> <div class ="table"> <div class="tr"> <div class="td"><center>Iron Man 3 - May 7, 2013 </center> </div> </div> <div class="tr"> <div class="td"> <audio controls> <source src="Podcasts/NPPAVENGERS07.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPAVENGERS07.MP3">Play Now</a> <BR> </audio> </div> </div> <div class="tr"> <div class="td"><center>Thor: The Dark World - Nov 12, 2013</center></div> </div> <div class="tr"> <div class = "td"> <audio controls> <source src="Podcasts/NPPAVENGERS08.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPAVENGERS08.MP3">Play Now</a> </audio> </div> </div> </div> </div> </div> <div class = "td"> <Center><a id="CarrieID" href="javascript:showonlyone('Carrie');"><img src = "images/NP_SKingSeries-Carrie-Art_300v02.jpg" width = "200"><BR>Carrie</center></a> <div class="EpisodeList" id="Carrie"> <div class ="table"> <div class="tr"> <div class="td"><center>Carrie (1976) - October 1, 2013 </center> </div> </div> <div class="tr"> <div class="td"> <audio controls> <source src="Podcasts/NPPCARRIE01.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE01.MP3">Play Now</a> <BR> </audio> </div> </div> <div class="tr"> <div class="td"><center>The Rage: Carrie 2 - October 8, 2013</center></div> </div> <div class="tr"> <div class = "td"> <audio controls> <source src="Podcasts/NPPCARRIE02.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE02.MP3">Play Now</a> </audio> </div> </div> <div class="tr"> <div class="td"><center>Carrie (2002) - October 15, 2013 </center> </div> </div> <div class="tr"> <div class="td"> <audio controls> <source src="Podcasts/NPPCARRIE03.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE03.MP3">Play Now</a> <BR> </audio> </div> </div> <div class="tr"> <div class="td"><center>Carrie (2013) - October 21, 2013</center></div> </div> <div class="tr"> <div class = "td"> <audio controls> <source src="Podcasts/NPPCARRIE04.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE04.MP3">Play Now</a> </audio> </div> </div> </div> </div> </div> </div> </div> </body> <html>

The two issues I'm having: 我遇到的两个问题：

1) How can I use a single function to show and hide all DIVs so I don't have code repeated for every single image the way I currently have $('#AvengersID').click and $('#CarrieID').click 1）如何使用单个函数显示和隐藏所有DIV，所以我没有像我现在有$（'＃AvengersID'）。click和$（'＃CarrieID'）那样对每个图像重复执行代码。点击

2) How can I hide all DIVs with the class EpisodeList? 2）如何隐藏带有EpisodeList类的所有DIV？ I've tried $('EpisodeList').hide(); 我已经尝试过$（'EpisodeList'）。hide（）; but it's not actually doing anything. 但实际上并没有做任何事情。

Answer 1

It seems you used wrong selector. 看来您使用了错误的选择器。

For all div, you can use $('div') 对于所有div，您都可以使用$（'div'）

For the div with specific class, you can use $('div.your-class') 对于具有特定类的div，您可以使用$（'div.your-class'）

You can look into JQuery Selector 您可以查看JQuery Selector

And below sample use .toggle() to show/hide elements. 在下面的示例中，使用.toggle（）显示/隐藏元素。 For more details on this API, check .toggle() 有关此API的更多详细信息，请检查.toggle（）

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <script src="scripts/jquery-3.3.1.min.js"></script> <Title>Now Playing 10th Anniversary Set Disc 1 - 2013</Title> <meta charset="UTF-8"> </head> <style> div.table {border: 1px solid black; display: table; } div.tr {border: 1px solid black; display: table-row; padding: 15px;} div.td {border: 1px solid black; display: table-cell; padding: 15px; vertical-align: middle;} .EpisodeList { display: none; }</style> <script> $(document).ready(function() { $('#AvengersID').click(function() { $('#Avengers').animate({ height: 'toggle' }, 2000 ); }); $('#CarrieID').click(function() { $('#Carrie').animate({ height: 'toggle' }, 2000 ); }); }); function toggleAllDiv(){ $('div').toggle(); } function toggleEpisodeListDiv(){ $('div.EpisodeList').toggle(); } </script> <Body> <center><Img src="images/NP-logo2016-10yrBug.png" border = 0/><BR/> <H2>Disc 1 - 2013</H2><P>(click on any logo to see and play the podcasts in that series released in 2013)</p></center> <center> <button onclick="toggleAllDiv()">Toggle All</button> <button onclick="toggleEpisodeListDiv()">Toggle EpisodeList</button> </center> <div class ="table"> <div class ="tr"> <div class = "td"> <Center><a id="AvengersID" href="javascript:showonlyone('Avengers');"><img src = "images/NP_ComicSeries_Avengers-Art-V2_300-2.jpg" width = "200"><BR>Avengers</center></a> <div class="EpisodeList" id="Avengers"> <div class ="table"> <div class="tr"> <div class="td"><center>Iron Man 3 - May 7, 2013 </center> </div> </div> <div class="tr"> <div class="td"> <audio controls> <source src="Podcasts/NPPAVENGERS07.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPAVENGERS07.MP3">Play Now</a> <BR> </audio> </div> </div> <div class="tr"> <div class="td"><center>Thor: The Dark World - Nov 12, 2013</center></div> </div> <div class="tr"> <div class = "td"> <audio controls> <source src="Podcasts/NPPAVENGERS08.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPAVENGERS08.MP3">Play Now</a> </audio> </div> </div> </div> </div> </div> <div class = "td"> <Center><a id="CarrieID" href="javascript:showonlyone('Carrie');"><img src = "images/NP_SKingSeries-Carrie-Art_300v02.jpg" width = "200"><BR>Carrie</center></a> <div class="EpisodeList" id="Carrie"> <div class ="table"> <div class="tr"> <div class="td"><center>Carrie (1976) - October 1, 2013 </center> </div> </div> <div class="tr"> <div class="td"> <audio controls> <source src="Podcasts/NPPCARRIE01.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE01.MP3">Play Now</a> <BR> </audio> </div> </div> <div class="tr"> <div class="td"><center>The Rage: Carrie 2 - October 8, 2013</center></div> </div> <div class="tr"> <div class = "td"> <audio controls> <source src="Podcasts/NPPCARRIE02.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE02.MP3">Play Now</a> </audio> </div> </div> <div class="tr"> <div class="td"><center>Carrie (2002) - October 15, 2013 </center> </div> </div> <div class="tr"> <div class="td"> <audio controls> <source src="Podcasts/NPPCARRIE03.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE03.MP3">Play Now</a> <BR> </audio> </div> </div> <div class="tr"> <div class="td"><center>Carrie (2013) - October 21, 2013</center></div> </div> <div class="tr"> <div class = "td"> <audio controls> <source src="Podcasts/NPPCARRIE04.MP3" type="audio/mpeg"> <A HREF = "Podcasts/NPPCARRIE04.MP3">Play Now</a> </audio> </div> </div> </div> </div> </div> </div> </div> </body> <html>

Answer 2

This should do the trick, firstly you were missing the '.' 这应该可以解决问题，首先您会丢失“。”。 inside $('EpisodeList') , it should've been $('.EpisodeList') 在$('EpisodeList') ，应该是$('.EpisodeList')

and this should work individually for each .table > .tr > .td 这应该对每个.table> .tr> .td单独起作用

$(document).ready(function() {
  $('.table .tr .td').click(function(){
    $('.EpisodeList').hide();
    $('#' + $(this).attr('id').replace('ID', '')).animate({
         height: 'toggle'
         }, 2000
    );
  });
});

jQuery-使用“ this”显示和隐藏具有一个功能的DIV

问题描述

2 个解决方案

解决方案1
1 2018-03-28 16:22:51

解决方案2
0 2018-03-28 16:22:43

jQuery-使用“ this”显示和隐藏具有一个功能的DIV

问题描述

2 个解决方案

解决方案1 1 2018-03-28 16:22:51

解决方案2 0 2018-03-28 16:22:43

解决方案1
1 2018-03-28 16:22:51

解决方案2
0 2018-03-28 16:22:43