javascript - jquery 选择 div 内的视频并将其静音

Question

我试图在使用 jquery 按下特定按钮时将某些视频静音。

我有这个 html 代码

<button id="mute">Mute all</button>
<button id="unmute">Unmute all</button>

<div id="displayer"></div>

问题是，在某些时候，我的显示器会像这样填充:

<div id="displayer">
    <div id="row0" class="row">
        <div class="col-md-2">
            <video  id="recorded0" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video  id="recorded1" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded2" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video  id="recorded3" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video  id="recorded4" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded5" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
    </div>
    <div id="row1" class="row">
        <div class="col-md-2">
            <video id="recorded6" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded7" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded8" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
    </div>
</div>

这是我的 JavaScript 代码:

$("#mute").click(function() {
  $("#displayer > video").prop('muted', true);
});

$("#unmute").click(function() {
  $("#displayer > video").prop('muted', false);
});

而且它不起作用。我不明白为什么。有人可以帮助我吗？

Answer 1

$("#displayer"> video") 表示获取 #displayer 的直接子元素的所有视频元素。#displayer 的唯一直接子元素是您的 div 行。

试试这个:

$("#displayer video")