[英]Using $(this) with css class selectors in Jquery
I have below HTML to display and download tracks . 我在下面的HTML中可以显示和下载曲目。 What i need is to hide Play button , Download button and the share button when user clicks share button(what i really need is to show social media buttons after hiding the default buttons) .
我需要的是在用户单击共享按钮时隐藏播放按钮,下载按钮和共享按钮(我真正需要的是在隐藏默认按钮之后显示社交媒体按钮)。
<form action="index.php" method="post">
<div id="53">
Track Name :- <b>Get Low</b>
<br />By :- <a href="../members/profile.php?id=16">DJ perera</a>
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Get Low.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Get Low.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvR2V0IExvdy5tcDM=" name="link">
</div>
</form>
<br>
<form action="index.php" method="post">
<div id="52">
Track Name :- <b>Eclips - Hardwell</b>
<br />By :- <a href="../members/profile.php?id=16">DJ perera</a>
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Eclips - Hardwell.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Eclips - Hardwell.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvRWNsaXBzIC0gSGFyZHdlbGwubXAz" name="link">
</div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy').slideUp();
});
});
</script>
i already have above js code to hide play , download and share buttons when a user clicks share button . 我已经有了上面的js代码,可以在用户单击“共享”按钮时隐藏播放,下载和共享按钮。 The Problem is since im using css class selectors , when user press Share button it hide all the play buttons , download buttons and share buttons from the webpage .
问题是因为我使用css类选择器,所以当用户按下“共享”按钮时,它会隐藏网页中的所有播放按钮,下载按钮和共享按钮。 what i need to achieve is that when a user click share button i need to hide only buttons that belong into that form only .
我需要实现的是,当用户单击共享按钮时,我只需要隐藏仅属于该表单的按钮。
i have already tried doing this . 我已经尝试过这样做。 but it won't work
但这行不通
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).$('.weezy').slideUp();
});
});
</script>
and 和
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).find('.weezy').slideUp();
});
});
</script>
and this 和这个
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy',this).slideUp();
});
});
</script>
Kindly point out what went wrong since im new to javascript . 请指出自从我对javascript刚接触以来出了什么问题。 Thanks
谢谢
Use .closest()
to select the closest parent form
element of the clicked element. 使用
.closest()
选择被单击元素的最接近的父form
元素。 From there, select the desired element within that form. 从那里, 在该表单中选择所需的元素。
$('.sharer').on('click', function () {
$(this).closest('form').find('.weezy').slideUp();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.