如何通过单击按钮禁用 JQuery 功能，但默认保持打开状态？

Posted 2023-05-07

【中文标题】如何通过单击按钮禁用 JQuery 功能，但默认保持打开状态？

【英文标题】：How can I disable a JQuery function by clicking on a button, but keep it on by default?

【发布时间】：2021-10-17 08:32:29

【问题描述】：

我正在创建一个视频播放器，它会在视频结束时重定向到另一个视频页面。

我想添加一个“关闭自动播放按钮”来禁用重定向脚本。

我该怎么做？

我的代码：

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
  video not supported
</video>
<button id="turnOfAutoPlay">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
    $("#myVideo").bind('ended', function() 
        setTimeout(function() 
            location.href = "http://www.localhost.com";
        , 3000)
    );
);
</script>

【参考方案1】：

您可以使用 unbind() 删除最后触发的侦听器

对于 jQuery 使用 bind()/unbind()

$('#turnOfAutoPlay').click(function() 
  $('#myVideo').unbind('ended');
)

注意： jQuery 3.0 及更高版本 .bind()/.unbind() 已弃用。采用 on()/off()

function videoEndedHandler () 
  setTimeout(function() 
    location.href = "http://www.localhost.com";
  , 3000)


$(document).ready(function() 
  document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler);
);

$('#turnOfAutoPlay').on('click', function() 
  document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler);
)

【讨论】：

方法已弃用（如您链接到的文档中所述），不应在现代答案中使用

这段代码在这个小代码中运行良好，但在我的项目代码中不起作用。请看：link to my code

嗯。您可以尝试使用香草 JS。我会更新帖子，让你看到

【参考方案2】：

为 setTimeout 函数使用全局变量，并在单击“关闭自动播放按钮”时调用 clearTimeout

示例代码：

var myVar;
function myFunction() 
  myVar = setTimeout(function() alert("Hello"); , 3000);

function myStopFunction() 
  clearTimeout(myVar);

编辑：给你

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
  video not supported
</video>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myVar;
$(document).ready(function() 
    $("#myVideo").bind('ended', function() 
       myVar = setTimeout(function() 
            location.href = "http://www.localhost.com";
        , 3000)
    );
);
function myStopFunction() 
  clearTimeout(myVar);

</script>

【参考方案3】：

在上述讨论的帮助下，我稍微修改了我的代码，但我认为它有点笨重??，但它可以工作......

我的代码：

const autoplayCheckbox = document.getElementById('autoplayCheckbox');
const video = document.getElementById('myVideo');

var myVar;

function videoEndedHandler () 
myVar = setTimeout(function() 
    location.href = "http://www.localhost.com";
  , 10000)


//By default autoplay is on.
$(document).ready(function() 
  video.addEventListener('ended', videoEndedHandler);
);

autoplayCheckbox.addEventListener('change', function() 
  if (this.checked) 
  //if autoplay is on
  document.getElementById("demo").innerHTML = "Autoplay: On";
    $(document).ready(function() 
      video.addEventListener('ended', videoEndedHandler);
    );

   else 
    //if autoplay is off
    document.getElementById("demo").innerHTML = "Autoplay: Off";
    video.removeEventListener('ended', videoEndedHandler);
  
);

function myStopFunction() 
  clearTimeout(myVar);
  document.getElementById("autoplayCheckbox").checked = false;
  document.getElementById("demo").innerHTML = "Autoplay: Off";

* 
    box-sizing: border-box;


body 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    transition: background 0.4s linear;
    background-color: #8ecae6;
    font-family: 'oswald';


.checkbox 
    opacity: 0;
    position: absolute;


.checkbox:checked + .label .ball 
    transform: translateX(23px);


.label 
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    height: 26px;
    width: 50px;
    transform-scale(2.2);


.ball 
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transition: transform 0.3s linear;

  <br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
    video not supported
  </video>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- partial:index.partial.html -->
<div>
<input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked">
<label for="autoplayCheckbox" class="label">
   <div class="ball"></div>
</label>
</div>

<p id="demo">Autoplay: On</p>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/>

Turn Of Autoplay button 仅在 10 秒 Timeout 函数运行时有效。 我添加了那个按钮，因为在主项目中它也可以作为一个按钮来关闭模式Have a look

我可以缩小它吗？？