我试图在javascript中做一个简单的按钮，做两件事

debugcn 发表于 Dev

昆汀含量

我正在寻找一种同时具有两个单独的操作/功能的方法

一个按钮打开和关闭

和一个会影响我的视频音量的按钮（打开和关闭）

我有两个脚本，但不知道如何将两者合而为一。

这是两个脚本：

<button onclick="toggleMute();">Volume</button>
                    
<input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
                    
<script type="text/javascript"> 
    function toggle(button)
    {
      if(document.getElementById("1").value=="OFF"){
       document.getElementById("1").value="ON";}
    
      else if(document.getElementById("1").value=="ON"){
       document.getElementById("1").value="OFF";}
    }    
</script>
                    
<script>
    function toggleMute() {
        var video=document.getElementById("theplayer")
            if(video.muted){video.muted = false;} 
            else {video.muted = true;}
    };
</script>

这是我的视频:)

<video autoplay="autoplay" loop="" muted="muted" webkit-playsinline="" playsinline="" class="video" id="theplayer" type="video/mp4" width="100%" height="auto" style="display:block; margin:0 ; padding: 0;">
                  <source src="<?php echo get_post_meta( get_the_ID(), 'content-video', true ); ?>" type="video/mp4">
</video>

非常感谢

SaymoinSam

在这里，我重构了您的代码

document.querySelector("input").onclick = function() {
  var states = {"OFF": "ON", "ON": "OFF"};
  this.value = states[this.value];
}              

document.querySelector("button").onclick = function() {
  var video = document.getElementById("theplayer");
  video.muted = !video.muted;
}

<button>Volume</button>          
<input type="button" value="ON" style="color:blue">
<br>
<video src="https://res.cloudinary.com/saymoinsam/video/upload/v1541946026/PiratesOfTheCaribbean.mp4" id="theplayer" autoplay="autoplay" loop="" muted="muted">
</video>

这是仅使用复选框的另一种实现，因为它是启用或禁用的所有元素，因此它是更正确的输入元素

document.querySelector("#volume-switcher").onchange = function() {
  document.querySelector("#theplayer").muted = !this.checked;
}

#volume-switcher {
  display: none;
}
#switcher-container {
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 15px;
  background-color: #eee;
  position: relative;
  box-shadow: 1px 1px 2px #ccc;
  cursor: pointer;
}

#switcher-container:after {
  content: "";
  background-color: white;
  position: absolute;
  top: -2px;
  left: 0;
  width: 20px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 1px 1px 2px #666666;
}

#volume-switcher:checked + #switcher-container {
  background-color: #9999ff;
}

#volume-switcher:checked + #switcher-container:after {
  left: 20px;
}

<input type="checkbox" id="volume-switcher">
<label id="switcher-container" for="volume-switcher"></label>
<br>
<video src="https://res.cloudinary.com/saymoinsam/video/upload/v1541946026/PiratesOfTheCaribbean.mp4" id="theplayer" autoplay="autoplay" loop="" muted="muted">
</video>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。