Question

我的网站上有一个boostrap转换：

<div class="form-group">
        <label class="checkbox-inline checkbox-right checkbox-switchery switchery-sm">
                <input type="checkbox" class="switchery" id="test55">
                    Live
        </label>                                
</div>
<div id="tableHolder"></div>

我希望得到这个：

在页面上加载外部页面到＆＃34; tableHolder＆＃34; DIV。
Switchery默认关闭。
当您点击切换时，加载相同的外部页面，但每隔5秒使用div resfresh。
如果您关闭了切换功能，则仅显示已加载的外部页面，而不显示resfresh间隔。

我遇到了麻烦，因为一切正常，但是当我按下开关关闭时，div仍然保持清爽，所以clearInterval并没有。工作:(

这是我的剧本：

<script type="text/javascript">
 $(document).ready(function () {
   $('#tableHolder').load('external.php?name=myId001')
   var documentInterval = 0;
   $('#test55').change(function () {

     if ($(this).prop("checked")) {

       documentInterval = setInterval(function () {
         $('#tableHolder').load('external.php?name=myId001')
       }, 3000);

     } else {

       clearInterval(documentInterval)
     }
   });
 });
</script>

Answer 1

使用点击，而不是更改功能。

$(document).ready(function() {
    $('#tableHolder').load('external.php?name=myId001');
    var elem = document.querySelector('#test55');
    var init = new Switchery(elem);
    var documentInterval = 0;
    var clickCheckbox = document.querySelector('#test55');
    $(document).on('click', '#test55', function() {
        if ($(this).prop("checked")) {
        documentInterval = setInterval(function() {
            $('#tableHolder').load('external.php?name=myId001');}, 3000);
        } else {
          clearInterval(documentInterval);
        }
    });
});

Sample fiddle here。这将在开关打开时向div附加一些文本，并在开关关闭时停止追加。如果您更改了“点击”。活动改变＆＃39;即使关闭开关，文本追加也将继续

Jquery / JavaScript boostrap Switchery clearInterval不起作用

1 个答案: