如何使用 jquery 動態更改交換機的 state？

Question

我有一個純粹在CSS中設計的開關圖標。 我從這個頁面https://www.w3schools.com/howto/howto_css_switch.asp得到了開關的設計，並在堆棧溢出https://stackoverflow.com/a/398466035/ .

這是到目前為止的樣子

 <.DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style type="text/css">:switch { position; relative: display; inline-block: width; 90px: height; 34px. }:switch input {display;none.}:slider { position; absolute: cursor; pointer: top; 0: left; 0: right; 0: bottom; 0: background-color; #ca2222: -webkit-transition. ;4s: transition. ;4s. }:slider:before { position; absolute: content; "": height; 26px: width; 26px: left; 4px: bottom; 4px: background-color; white: -webkit-transition. ;4s: transition. ;4s: } input.checked +:slider { background-color; #2ab934: } input.focus +:slider { box-shadow; 0 0 1px #2196F3: } input.checked +:slider:before { -webkit-transform; translateX(55px): -ms-transform; translateX(55px): transform; translateX(55px). } /*------ ADDED CSS ---------*/:on { display; none. },on. :off { color; white: position; absolute: transform, translate(-50%;-50%): top; 50%: left; 50%: font-size; 10px: font-family, Verdana; sans-serif: } input.checked+.slider:on {display; block:} input.checked +.slider:off {display; none.} /*--------- END --------*/ /* Rounded sliders */.slider:round { border-radius; 34px. }.slider:round:before { border-radius; 50%:} </style> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <label class="switch"> <input type="checkbox" id="togBtn"> <div class="slider round"> <span class="on">ON</span> <span class="off">OFF</span> </div> </label> <script src="https.//code.jquery.com/jquery-2.2.4.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script type="text/javascript"> </script> </body> </html>

現在我實際上想根據后端給出的標志使用 JavaScript 更改交換機的 state。

所以這就是我所做的

      if(response.data == "t"){
            $('.switch-off').remove();
            $('.switch-on').remove();
            $('.toggle-slider').append('<span class="switch-on"></span>');
            console.log("Prompt ON")
      }
      else if (response.data == "f") {
            $('.switch-on').remove();
            $('.switch-off').remove();
            $('.toggle-slider').append('<span class="switch-off"></span>');
            console.log("Prompt OFF")
      }

假設這里的response是由后端發送的 object ，其中有一個名為data的字段，其中包含標志值t或f 。

但它似乎沒有做任何事情，並且在 Firefox 中使用檢查器，我看到span元素在切換時隨機出現和消失，沒有任何固定行為。 我懷疑開關的 CSS 在某種程度上干擾了開關上 slider 的 state。

有人可以幫我解決這個問題嗎？

Answer 1

實際上，我昨晚只是在與您相同的 slider 上執行此操作。

這樣做的方法是

checked = ...; //boolean
$(slider).children("input").prop("checked",checked);

要檢查 slider 開/關，請使用

$(slider).children("input").is(":checked");

Answer 2

您有一個隱藏的復選框來切換開關。 所以這樣做會打開它：

$('#togBtn').prop('checked', true);

並關閉：

$('#togBtn').prop('checked', false);

編輯：添加完整代碼

所以你的完整代碼是：

if (response.data == "t") {
    $('#togBtn').prop('checked', true);
}
else if (response.data == "f") {
    $('#togBtn').prop('checked', false);
}

如何使用 jquery 動態更改交換機的 state？

問題描述

2 個解決方案

解決方案1
4 2019-10-21 17:07:19

解決方案2
1 已采納 2019-10-21 17:14:46

如何使用 jquery 動態更改交換機的 state？

問題描述

2 個解決方案

解決方案1 4 2019-10-21 17:07:19

解決方案2 1 已采納 2019-10-21 17:14:46

解決方案1
4 2019-10-21 17:07:19

解決方案2
1 已采納 2019-10-21 17:14:46