使用javascript单击时仅激活div子类

Question

我有一个 wordpress 查询循环遍历页面上的帖子。每个 .audio-box 都有 2 个 .play 按钮，我需要它们一起工作，单击一个按钮时，我希望该 div 中的另一个按钮也这样做。问题是我在页面上有多个音频框 div。我只需要那个特定的 .audio-box div 中的 2 个播放按钮同时工作，而不是所有其他的。这是我的 html：<div class="audio-box">        <div class="audio-btn">            <img src="image/path.jpg" alt="play" />        </div>        <div class="audio-content">            <div class="date">Published 18/01/20</div>            <h2>title</h2>            <p>content</p>        </div>        <div style="clear:both;"></div>        <div class="audio-player play-wrap">            <audio id="player" class="music">                <source src="path/to/audio.mp3" type="audio/mpeg" />            </audio>            <div id="audio-player">                <div id="controls">                    <i id="play" class="fa fa-play play"></i>                    <div id="progressbar"></div>                    <span id="time" class="time">00:00</span>                    <i id="mute" class="fa fa-volume-up"></i>                    <div id="volume"></div>                </div>            </div>            <i class="fa fa-play play"></i>        </div>    </div>这是我拥有的 javascript：play_button.click(function() {        player[player.paused ? 'play' : 'pause']();        $('.play').toggleClass("fa-pause", !player.paused);        $('.play').toggleClass("fa-play", player.paused);    });我知道这个问题是因为我在 .play 元素上说切换类但是有没有办法在特定的 .audio-box div 中说 .play 元素？

Answer 1

以下将从单击的按钮向上看，到下一个父级，并将在某处找到的元素.audio-box 上展开操作：.play

play_button.click(function() {
    player[player.paused ? 'play' : 'pause']();
    $(this).closest('.audio-box')
           .find('.play')
           .toggleClass("fa-pause", !player.paused)
           .toggleClass("fa-play", player.paused);
});

Answer 2

$(".audio-box").click(()=>{
    $(".audio-box").children().css({"color": "red", "border": "2px solid red"});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>