显示和隐藏html和javascript元素

扎尔纳斯

我有两个文件，一个是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>

年龄

您遇到了许多问题：

错误注释会干扰该if语句，在您运行代码段时显然会引发错误。请检查错误。
您似乎在执行复杂的逻辑上做一些本应直截了当的事情。尝试考虑函数调用的流程，并通过简化进行改进。
请注意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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。