显示和隐藏元素 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 语句的错误评论，当您运行代码片段时，它显然会引发错误。请检查错误。
你的逻辑似乎过于复杂，而这些事情本来应该是直截了当的。尝试考虑您的函数调用流程并通过简化进行改进。
注意 CSS 的使用，它是一个强大的工具，您应该利用它。
考虑改进您的 naming convention，这将为您的逻辑提供更多意义。为此，我修改了变量和函数的名称。

下面的代码片段改进了您的逻辑并且不会引发错误。您可以从这里开始。

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

Show and hide elements html and javascript

html

javascript

jquery

google-chrome

google-chrome-extension