我正在尝试将链接的 ID 添加到函数中的选择器中,以便根据单击的链接显示或隐藏 .XXXXXX1,2 或 3。这是我到目前为止整理的代码:
我试过做$('.video' + videoplay)
我所追求的事情,但这不起作用。
查询:
$(document).ready(function() {
$('.videoPlay').click(function(){
var videoplay = $(this.id);
$('.videoSubTitle').hide();
$('#video' + videoplay).show();
$('#videoPlay' ).hide();
$('#videoPlay' + videoplay).show();
});
});
HTML:
<h2>Latest videos</h2>
<h3 class="videoSubTitle">Choose a video below</h3>
<h3 class="videoSubTitle" id="video1" style="display:none;">Video 1</h3>
<h3 class="videoSubTitle" id="video2" style="display:none;">Video 2</h3>
<h3 class="videoSubTitle" id="video3" style="display:none;">Video 3</h3>
<div id="listContainer">
<div id="videoPlay1">
<img src="" style="width:650px; height:360px;" />
</div>
<div id="videoPlay2" style="display:none;">
</div>
<div id="videoPlay3" style="display:none;">
</div>
<div id="videoContent 1">
<img src="" width="240" style="margin-right:20px;" height="150" alt="video 1" align="left" />
<h2>Video 1 <a class="videoPlay" id="1" href="#">WATCH NOW</a></h2>
<h4><span class="lblShortDesc">berhj brhej beghrjbg hrjebh grebeghr jbh rjbh jgrebhjg rbhj gbehrjbr ehjbgh rejbeghjr<br />
<br /><span style="font-size:12px;">Length: 59 secoonds</span>
</span>
</h4>
</div>
<div id="videoContent 2">
<img src="" width="240" style="margin-right:20px;" height="150" alt="video 2" align="left" />
<h2>Video 2 <a class="videoPlay" id="2" href="#">WATCH NOW</a></h2>
<h4><span class="lblShortDesc">berhj brhej beghrjbg hrjebh grebeghr jbh rjbh jgrebhjg rbhj gbehrjbr ehjbgh rejbeghjr<br />
<br /><span style="font-size:12px;">Length: 59 secoonds</span>
</span>
</h4>
</div>
<div id="videoContent 3">
<img src="" width="240" style="margin-right:20px;" height="150" alt="video 3" align="left" />
<h2>Video 3 <a class="videoPlay" id="3" href="#">WATCH NOW</a></h2>
<h4><span class="lblShortDesc">berhj brhej beghrjbg hrjebh grebeghr jbh rjbh jgrebhjg rbhj gbehrjbr ehjbgh rejbeghjr<br />
<br /><span style="font-size:12px;">Length: 59 secoonds</span>
</span>
</h4>
</div>