javascript - 在 Jquery 中将 $(this) 与 css 类选择器一起使用

Question

我有下面的 HTML 来显示和下载轨道。我需要的是在用户单击共享按钮时隐藏播放按钮、下载按钮和共享按钮(我真正需要的是在隐藏默认按钮后显示社交媒体按钮)。

   <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>

我已经有了上面的 js 代码来在用户单击共享按钮时隐藏播放、下载和共享按钮。问题是因为我使用 css 类选择器，当用户按下共享按钮时，它会隐藏网页上的所有播放按钮、下载按钮和共享按钮。我需要实现的是，当用户单击共享按钮时，我只需要隐藏属于该表单的按钮。

我已经尝试过这样做了。但它不会工作

<script type="text/javascript">
    $(document).ready(function(){
        $('.sharer').click(function(){
            $(this).$('.weezy').slideUp();
        });
    });
</script>

和

<script type="text/javascript">
    $(document).ready(function(){
        $('.sharer').click(function(){
            $(this).find('.weezy').slideUp();
        });
    });
</script>

还有这个

<script type="text/javascript">
    $(document).ready(function(){
        $('.sharer').click(function(){
            $('.weezy',this).slideUp();
        });
    });
</script>

请指出自从我是 javascript 新手以来出了什么问题。谢谢

Answer 1

使用.closest()选择被单击元素的最近的父 form 元素。从那里，选择该表单中所需的元素。

Example Here

$('.sharer').on('click', function () {
    $(this).closest('form').find('.weezy').slideUp();
});