JQuery - 使用'this'来显示和隐藏带有一个函数的DIV

时间：2018-03-28 16:12:51

标签： javascript jquery html css

我已经用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 个答案:

答案 0 :(得分：1)

似乎你使用了错误的选择器。

对于所有div，您可以使用$（＆＃39; div＆＃39;）

对于具有特定课程的div，您可以使用$（＆＃39; div.your-class＆＃39;）

您可以查看JQuery Selector

以下示例使用 .toggle（）来显示/隐藏元素。有关此API的更多详细信息，请查看.toggle()

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这应该可以解决问题，首先你错过了＆＃39;。＆＃39;在$('EpisodeList')内，它应该是$('.EpisodeList')

这应该适用于每个.table＆gt; .tr＆gt; .td 

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