时间戳

首页 > 解决方案 > 使用 javascript 点击时仅激活 div 子类

javascript - 使用 javascript 点击时仅激活 div 子类

问题描述

我有一个 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 元素？

标签： javascripthtmljquery

解决方案

以下将从单击的按钮向上看，到下一个父级，并将在某处找到的元素.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);
});

推荐阅读