为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

天涯尽头无女友 2023-02-24 16:52:03
我有一个 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 元素?
查看完整描述

2 回答

?
慕森卡

TA贡献1806条经验 获得超8个赞

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


查看完整回答
反对 回复 2023-02-24
?
慕容森

TA贡献1853条经验 获得超18个赞

$(".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>


查看完整回答
反对 回复 2023-02-24
  • 2 回答
  • 0 关注
  • 68 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信