ボタンはダブルクリック後にのみ切り替えます

以下はスクリプトオン/オフコントロールのledのWebページを使用しています。このスクリプトは実際にledを制御するpythonにリンクされています。すべて正常に機能しますが、問題はボタンが右に、つまりダブルクリック後にONの位置に切り替わることです。ボタンはダブルクリック後にのみ切り替えます

最初のチェックボックスがオンになるとLEDが点灯しますが、スライドは右に移動しません。
2回目のクリックで、スライドが右に移動します。

一方、クリックするとボタンが左側に切り替わります（これは問題ありません）。助けてもらえますか？

// HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>{{ title }}</title> 
     <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

// はJavaScript：

<script> 
    $(document).ready(function(){ 
    $("#test").click(function(){ 
    if ($(this).is(":checked")) 
    { 
     $('#On').get(0).click(); 
    } 
    else 
    { 
     $('#Off').get(0).click(); 
    } 
    }); 
}); 
</script>

// CSS：

<style> 
.onoffswitch { 
    position: relative; width: 90px; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
} 
.onoffswitch-checkbox { 
    display: none; 
} 
.onoffswitch-label { 
    display: block; overflow: hidden; cursor: pointer; 
    border: 2px solid #999999; border-radius: 20px; 
} 
.onoffswitch-inner { 
    display: block; width: 200%; margin-left: -100%; 
    transition: margin 0.3s ease-in 0s; 
} 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
    box-sizing: border-box; 
} 
.onoffswitch-inner:before { 
    content: "ON"; 
    padding-left: 10px; 
    background-color: #34A7C1; color: #FFFFFF; 
} 
.onoffswitch-inner:after { 
    content: "OFF"; 
    padding-right: 10px; 
    background-color: #EEEEEE; color: #999999; 
    text-align: right; 
} 
.onoffswitch-switch { 
    display: block; width: 18px; margin: 6px; 
    background: #FFFFFF; 
    position: absolute; top: 0; bottom: 0; 
    right: 56px; 
    border: 2px solid #999999; border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
} 
</style> 
</head>

// HTML：

<body> 
    <div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="test"> 
    <label class="onoffswitch-label" for="test"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
    </div> 
    <h1> 
     <a href="/On#On" id="On"></a> 
    </h1> 
    <h1> 
     <a href="/Off#Off" id="Off"></a> 
    </h1> 

</body> 
</html>

出典

2017-03-18 veeramani shankar

$('#On').click();と$('#Off').click();それらでget(0)

$(document).ready(function() { 
 
    $("#test").click(function() { 
 
    if ($(this).is(":checked")) { 
 
     $('#On').click(); 
 
    } 
 
    if (!$(this).is(":checked")) { 
 
    $('#Off').click(); 
 
    } 
 
    }); 
 
    $('#On').click(function(){ 
 
     console.log('id On clicked') 
 
    }); 
 
    $('#Off').click(function(){ 
 
     console.log('id Off clicked') 
 
    }); 
 
});

.onoffswitch { 
 
    position: relative; 
 
    width: 90px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
} 
 

 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 

 
.onoffswitch-label { 
 
    display: block; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
} 
 

 
.onoffswitch-inner { 
 
    display: block; 
 
    width: 200%; 
 
    margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 

 
.onoffswitch-inner:before, 
 
.onoffswitch-inner:after { 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 30px; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    font-size: 14px; 
 
    color: white; 
 
    font-family: Trebuchet, Arial, sans-serif; 
 
    font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 

 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 10px; 
 
    background-color: #34A7C1; 
 
    color: #FFFFFF; 
 
} 
 

 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 10px; 
 
    background-color: #EEEEEE; 
 
    color: #999999; 
 
    text-align: right; 
 
} 
 

 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 18px; 
 
    margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 56px; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 

 
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 

 
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch { 
 
    right: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="onoffswitch"> 
 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="test"> 
 
    <label class="onoffswitch-label" for="test"> 
 
    <span class="onoffswitch-inner"></span> 
 
    <span class="onoffswitch-switch"></span> 
 
    </label> 
 
    </div> 
 
    <h1> 
 
    <a href="/On#On" id="On"></a> 
 
    </h1> 
 
    <h1> 
 
    <a href="/Off#Off" id="Off"></a> 
 
    </h1> 
 

 
</body>

出典

2017-03-18 06:38:34

の必要はありません私が手を削除すると（0）ボタンを押しても切り替わりますが、リンクがあります選択またはトリガーされていない –

再びボタンはトグルしますが、リンクは選択されていません –

[href = "/ On]は、pythonフラスコに通じるhtmlリンクです。このリンクが選択されると、pythonはそのリンクが選択されたことを検出し、ターン制御LEDの対応するコードを実行し始めます。LED –

ボタンはダブルクリック後にのみ切り替えます

答えて

関連する問題