切换按钮可在JSBIN上使用,但在Blask Server上不起作用



我有一个使用HTML,CSS&的代码进行切换按钮JavaScript。该代码的目的是在选中复选框时激活或选择HREF链接。这在jsbin.com上正常工作。但是,当我在Linux平台上在烧瓶服务器上运行时,复选框立即取消选中,以便该按钮切换一秒钟,然后返回OFF位置。我不知道为什么会发生这种情况。

$(function(){
      $("input[type='checkbox']").change(function(){
      var item=$(this);    
      if(item.is(":checked"))
      {
           $('#On').get(0).click();
      }
      else
      {
           $('#Off').get(0).click();   
      }        
     });
    })
    $(document).ready(function(){
        //$("#Off").hide();
        $("#On").click(function(){
        
            $("#On").hide();
            $("#Off").show();
        
        });
        $("#Off").click(function(){
            $("#Off").hide();
            $("#On").show();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
     <head>
     <title>{{ title }}</title>
     </head>
    <body>
    <body>
    <input type="checkbox" > <br/>
      <h1>
          <a href="/On" id="On" class="">ON</a>
      </h1>
      <h1>
          <a href="/Off" id="Off" class="off_class">OFF</a>
      </h1>
    </body> 
    </body>
    </html>

而不是在href中使用#,代码正常工作。

$(function() {
  $("input[type='checkbox']").change(function() {
    var item = $(this);
    if (item.is(":checked")) {
      $('#On').get(0).click();
    } else {
      $('#Off').get(0).click();
    }
  });
})
$(document).ready(function() {
  //$("#Off").hide();
  $("#On").click(function() {
    $("#On").hide();
    $("#Off").show();
  });
  $("#Off").click(function() {
    $("#Off").hide();
    $("#On").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"> <br/>
<h1>
  <a href="#" id="On" class="">ON</a>
</h1>
<h1>
  <a href="#" id="Off" class="off_class">OFF</a>
</h1>

相关内容

最新更新