按鈕僅在雙擊後切換

以下是使用網頁導致的開/關控件的腳本。該腳本鏈接到實際控制led的python。一切工作正常，但問題是按鈕切換到右側，即只有雙擊後，ON位置。按鈕僅在雙擊後切換

第一次點擊複選框被選中，LED變爲ON，但滑動不會移動到右側。
第二次單擊幻燈片向右移動。

按鈕在單擊時切換到左側（此問題沒有問題）。有人可以幫忙嗎？

// 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

當我刪除的get（0）按鈕切換很好，但鏈接未選中或觸發 –

再次按鈕切換但未選擇鏈接 –

[href =「/ On]是一個導致python燒瓶的html鏈接。當這個鏈接被選中python檢測到該鏈接被選中，並開始執行相應的代碼，這是轉動控制LED –

按鈕僅在雙擊後切換

回答

相關問題