jQuery-使用“ this”显示和隐藏具有一个功能的DIV
[英]JQuery - using 'this' to show and hide DIVs with one function
问题描述
我已经对此进行了Google搜索，但无法对此进行说明。 我对jQuery有一定的经验，但是生疏了。
我的目标是显示图像网格。 单击图像时，隐藏的DIV将滑出并显示文本（说明名称和HTML5音频播放器）。 一次只能显示一个剧集列表。
这是我的代码：
<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>
我遇到的两个问题：
1）如何使用单个函数显示和隐藏所有DIV，所以我没有像我现在有$（'＃AvengersID'）。click和$（'＃CarrieID'）那样对每个图像重复执行代码。点击
2）如何隐藏带有EpisodeList类的所有DIV？ 我已经尝试过$（'EpisodeList'）。hide（）; 但实际上并没有做任何事情。
2 个解决方案
解决方案1
1 2018-03-28 16:22:51
看来您使用了错误的选择器。
对于所有div，您都可以使用$（'div'）
对于具有特定类的div，您可以使用$（'div.your-class'）
您可以查看JQuery Selector
在下面的示例中，使用.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>
解决方案2
0 2018-03-28 16:22:43
这应该可以解决问题，首先您会丢失“。”。 在$('EpisodeList') ，应该是$('.EpisodeList')
这应该对每个.table> .tr> .td单独起作用
$(document).ready(function() {
$('.table .tr .td').click(function(){
$('.EpisodeList').hide();
$('#' + $(this).attr('id').replace('ID', '')).animate({
height: 'toggle'
}, 2000
);
});
});
使用jQuery显示和隐藏div？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.