在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();
});