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

我有一个wordpress查询在页面上的帖子中循环。每个.audio框都有2个播放按钮，我需要它们一起工作，当单击其中一个按钮时，我希望该div中的另一个按钮也这样做。问题是我在页面上有多个音箱div。我只需要2个播放按钮，在特定的。音频盒div工作在同一时间，而不是所有其他

这是我的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>

我知道问题是因为我说的是.play元素上的toggle类，但有没有办法在特定的.audio box div中说.play元素？

$（“.audio box”）。单击（（）=>{
$（“.audio box”）.children（）.css（{“color”：“red”，“border”：“2px solid red”}）；
})

---

以下内容将从单击的按钮向上查看下一个父级

。音频框

并将在

.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);
});

---

您是否缺少

$（“音频框”）

中的选择器？无论是

还是

#

都是真的，很抱歉我正在修复它，所以您应该始终留下一个注释，说明为什么您的代码解决了OP的问题。您的代码还可以设置

.audio box

颜色和边框的所有子项，这有什么帮助？

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