在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元素。 从那里， 在该表单中选择所需的元素。

这里的例子

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