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.