代码之家 › 专栏 › 技术社区 › Sandra Willford

输入未触发时的jquery

jquery javascript

Sandra Willford · 技术社区 · 8 年前

我正在制作一个视频控制滑块,不知道为什么这个事件没有触发。

jquery:

$(document).on('input', '.volume-bar', function() {
    const video = $(this).closest('.video-container').children('video').get(0);
    alert($(this).value());
    video.volume = $(this).value();
})

html:

<div class="col-md-6 offset-md-3 video-container px-0">
    <video id="rogueVideo" width="100%" poster="images/posters/rogue.jpg">
        <source src="videos/rogue.mp4" type="video/mp4">
    </video>
    <div class="video-controls">
        <button class="play-pause btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-play fa-fw"></i></button>
        <input class="seek-bar w-100 mr-1" type="range" value="0">
        <button class="mute btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-volume-off fa-fw"></i></button>
        <input class="volume-bar w-25 mr-1" type="range" min="0" max="1" step="0.1" value="1">
        <button class="full-screen btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-expand fa-fw"></i></button>
    </div>
</div>

它没有收到事件,因为我从未看到警报

3 回复 | 直到 8 年前

neoteknic 8 年前

尝试以下操作:

$(function(){
    $('.volume-bar').on('input',function() {
       var video = $(this).closest('.video-container').children('video').first();
       alert($(this).val());
       video.prop('volume',$(this).val());
    });
});

您还可以使用更改事件而不是输入视频体积

caramba 8 年前

您应该更改为 $(document).on('change', '.volume-bar', function() { 在jQuery中 $(this).val() 不 $(this).value()

$(document).on('change', '.volume-bar', function() {
    const video = $(this).closest('.video-container').children('video').get(0);
    alert($(this).val());
    video.volume = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 offset-md-3 video-container px-0">
    <video id="rogueVideo" width="100%" poster="images/posters/rogue.jpg">
        <source src="videos/rogue.mp4" type="video/mp4">
    </video>
    <div class="video-controls">
        <button class="play-pause btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-play fa-fw"></i></button>
        <input class="seek-bar w-100 mr-1" type="range" value="0">
        <button class="mute btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-volume-off fa-fw"></i></button>
        <input class="volume-bar w-25 mr-1" type="range" min="0" max="1" step="0.1" value="1">
        <button class="full-screen btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-expand fa-fw"></i></button>
    </div>
</div>

I wrestled a bear once. 8 年前

这个 input 活动进行得很好,但是 Mozilla does recommend 使用 change 相反,自 输入 的实现不一致。

此外,务必检查控制台。 $.value() 不是函数。

$(document).on('input', '.volume-bar', function() {
  const video = $(this).closest('.video-container').children('video').get(0);
  alert($(this).val());
  video.volume = $(this).val();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 offset-md-3 video-container px-0">
  <video id="rogueVideo" width="100%" poster="images/posters/rogue.jpg">
        <source src="videos/rogue.mp4" type="video/mp4">
    </video>
  <div class="video-controls">
    <button class="play-pause btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-play fa-fw"></i></button>
    <input class="seek-bar w-100 mr-1" type="range" value="0">
    <button class="mute btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-volume-off fa-fw"></i></button>
    <input class="volume-bar w-25 mr-1" type="range" min="0" max="1" step="0.1" value="1">
    <button class="full-screen btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-expand fa-fw"></i></button>
  </div>
</div>