使用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&nbsp;上展开操作：.playplay_button.click(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;player[player.paused&nbsp;?&nbsp;'play'&nbsp;:&nbsp;'pause'](); &nbsp;&nbsp;&nbsp;&nbsp;$(this).closest('.audio-box') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.find('.play') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.toggleClass("fa-pause",&nbsp;!player.paused) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.toggleClass("fa-play",&nbsp;player.paused); });

Answer 2

$(".audio-box").click(()=>{ &nbsp;&nbsp;&nbsp;&nbsp;$(".audio-box").children().css({"color":&nbsp;"red",&nbsp;"border":&nbsp;"2px&nbsp;solid&nbsp;red"}); })<script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>