顯示和隱藏元素 html 和 javascript

Question

我有兩個文件，一個是 javascript，一個是 HTML。 我想顯示和隱藏一個元素，但是當我嘗試這個時它不起作用。 此外，我使用最新的 JQuery 和 chrome 擴展我還嘗試了內部 HTML 方法，但什么也沒有。

 function updateLabel() { var x = true; // this is for the localstorage anternative if (x //localStorage.getItem("EnabledAllSites")) { $("#toggle").hide(0); $("#toggle_check").show(0); x = false; // this is for the localstorage anternative } else { $("#toggle").show(0); $("#toggle_check").hide(0); } } updateLabel(); function toggle() { /*var background = chrome.extension.getBackgroundPage(); localStorage.setItem("EnabledAllSites", /* this is a boolean*///.background;enabled); updateLabel(). /*chrome.tabs:query({ active, true: currentWindow, true }. function (tabs) { chrome.tabs.update(tabs[0],id: { url. tabs[0];url }); }).*/ } $("#toggle");click(function () { toggle(); }). $("#toggle_check");click(function () { toggle(); });

 <body> <header style="display: flex; justify-content: space-between"> <:--- this is what i want to hide and show ---> <button style=" background-color; none: border; none: width; 42px: font-size; 18px: " id="toggle_check" > <div>✅</div> </button> <;--- this is what i want to hide and show ---> <button style=" background-color: none; border: none; width: 42px; font-size: 18px. " id="toggle" > <div>❌</div> </button> </header> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="./popup.js"></script>

Answer 1

你有很多問題：

錯誤的注釋會干擾if語句，當您運行代碼段時，它顯然會引發錯誤。 請檢查錯誤。
你有一些似乎過於復雜的邏輯來做一些原本應該直截了當的事情。 嘗試考慮您的 function 調用的流程並通過簡化來改進。
注意 CSS 的使用，它是一個強大的工具，您應該利用它。
考慮改進您的命名約定，這將為您的邏輯提供更多意義。 出於這個原因，我修改了變量和函數的名稱。

下面是一個片段，它改進了您的邏輯並且不會引發錯誤。 你可以從這里開始。

 var checkmarkId = "#button_checkmark", closeId = "#button_close"; function showAndHide() { $(closeId).hide(); $(checkmarkId).show(); } $(checkmarkId).click(showAndHide); $(closeId).click(showAndHide);

 header { display: flex; justify-content: space-between; } #button_checkmark { background-color: none; border: none; font-size: 18px; width: 42px; } #button_close { background-color: none; border: none; font-size: 18px; width: 42px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <header> <!-- this is what i want to hide and show --> <button id="button_checkmark"> <div>✅</div> </button> <!-- this is what I want to hide and show --> <button id="button_close"> <div>❌</div> </button> </header> </body>

顯示和隱藏元素 html 和 javascript

問題描述

1 個解決方案

解決方案1
3 已采納 2020-12-08 14:59:24

顯示和隱藏元素 html 和 javascript

問題描述

1 個解決方案

解決方案1 3 已采納 2020-12-08 14:59:24

解決方案1
3 已采納 2020-12-08 14:59:24