使用帶有開關按鈕的jQuery自動刷新網頁

Question

我想使用帶有開關按鈕的jQuery自動刷新我的網頁。但是，我嘗試了我的代碼，但它根本不起作用。任何人都知道有什麼問題？

<script> 
    $(document).ready(function(){ 
     $("#btnautorefreshon").click(function(){ 
     setTimeout(function() { location.reload() },1500); 
     }); 
    }); 
</script> 

下面是開關按鈕的代碼：

<div class="page-header-actions" data-toggle="buttons" role="group"> 
      <label class="btn btn-outline btn-primary active"> 
      <input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked /> 
      <i id="btnautorefreshoff" class="icon wb-check text-active" aria-hidden="true"></i>      Auto Refresh Off 
      </label> 
      <label class="btn btn-outline btn-primary"> 
      <input type="radio" name="options" autocomplete="off" value="autorefreshon" /> 
      <i id="btnautorefreshon" class="icon wb-check text-active" aria-hidden="true"></i>      Auto Refresh on 
      </label> 
</div> 

謝謝。

Answer 1

自動完成的單選按鈕是您的html中的input標記，因此您只需重新調整選擇標籤的焦點即可通過向輸入本身添加唯一標識來解決此問題。

/* $(".btn").on({ 
 
    'click': function() { 
 
    if ($('input#refreshon').is(':checked')) { 
 
     console.log('checked'); 
 
     setTimeout(function() { 
 
      location.reload(); 
 
     }, 1500); 
 
    } 
 
    } 
 
}); */ 
 

 
$('input#refreshon').on({ 
 
    'click': function() { 
 

 
    console.log('checked'); 
 
    setTimeout(function() { 
 
     location.reload(); 
 
    }, 1500); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page-header-actions" data-toggle="buttons" role="group"> 
 
    <label class="btn btn-outline btn-primary active"> 
 
    <input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked /> 
 
    <i id="btnautorefreshoff" class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh Off 
 
    </label> 
 
    <label class="btn btn-outline btn-primary"> 
 
    <input id="refreshon" type="radio" name="options" autocomplete="off" value="autorefreshon" /> 
 
    <i id="btnautorefreshon" class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh on 
 
    </label> 
 
</div>