Question

当您多次点击栏图标时，您将无法显示十字图标。

单击条形图标时，将出现一个十字形图标。当您单击新的十字图标时，会出现条形图标。到目前为止，一切都很好。但是当您再次单击条形图标时，什么也没有发生。

var barsIcon = document.getElementById("bars-icon");
var crossOG;

barsIcon.addEventListener("click", function() {
  barsIcon.setAttribute('class', 'fas fa-times');
  barsIcon.setAttribute('id', 'cross-icon');

  var crossIcon = document.getElementById('cross-icon');
  crossOG = crossIcon;

  crossIcon.addEventListener("click", function() {
    crossIcon.setAttribute('class', 'fas fa-bars fa-x');
    crossIcon.setAttribute('id', 'bars-icon');
  });
});

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

  <div>
    <i class="fas fa-bars" id="bars-icon" style="flex-grow: 1;"></i>
  </div>

Answer 1

这不是绑定事件的正确方法。不要在嵌套函数中使用事件绑定。这不是一个好习惯

var menuIcon = document.getElementById("icon");
var toggled = false;
var crossOG;

menuIcon.addEventListener("click", function() {
  if(!toggled){
    menuIcon.setAttribute('class', 'fas fa-times');
    toggled = true;
  }
  else{
    menuIcon.setAttribute('class', 'fas fa-bars fa-x');
    toggled = false;
  }
    
});

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

  <div>
    <i class="fas fa-bars" id="icon" style="flex-grow: 1;"></i>
  </div>

也不要更改商品ID。

Answer 2

我不会弄乱您元素的ID，例如在运行时更改它。最好先将两个图标元素都添加到DOM中，然后使用 display 属性对其可见性进行切换。

var barsIcon = document.getElementById("bars-icon");
barsIcon.addEventListener("click", function() {
  barsIcon.style.display = "none";
  crossIcon.style.display = "initial";

});

var crossIcon = document.getElementById('cross-icon');
crossIcon.addEventListener("click", function() {
  barsIcon.style.display = "initial";
  crossIcon.style.display = "none";
});

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

<div>
  <i class="fas fa-bars" id="bars-icon" style="flex-grow: 1;"></i>
  <i class="fas fa-times" id="cross-icon" style="flex-grow: 1;display:none"></i>
</div>

Answer 3

不建议更改DOM元素的ID，特别是对于将事件侦听器附加到该元素的ID。一种解决方案是使用两个图标，并根据单击的图标显示/隐藏它们。

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

</head>
<body>
  <div>
    <i class="fas fa-bars" id="bars-icon" style="flex-grow: 1;"></i>
    <i class="fas fa-times" id="cross-icon" style="flex-grow: 1; display: none;"></i>
  </div>
</body>

var barsIcon = document.getElementById("bars-icon");
var crossIcon = document.getElementById("cross-icon");


barsIcon.addEventListener("click", function() {
    barsIcon.style.display = 'none';
    crossIcon.style.display = 'block';

});

crossIcon.addEventListener("click", function() {
    crossIcon.style.display = 'none';
    barsIcon.style.display = 'block';
});

Answer 4

我建议您将当前状态保留在自定义属性data-attr 中的标记节点上，而不是创建JavaScript 变量。

读取HTML节点的当前状态并相应地工作。

var barsicon = document.getElementById("bars-icon"); barsicon.addEventListener("click", baricon); function baricon() { if(barsicon.getAttribute('data-attr') == "bars"){ barsicon.setAttribute('class', 'fas fa-times'); barsicon.setAttribute('data-attr', 'cross'); }else{ barsicon.setAttribute('class', 'fas fa-bars'); barsicon.setAttribute('data-attr', 'bars'); } }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> <div> <i class="fas fa-bars" data-attr="bars" id="bars-icon" style="flex-grow: 1;"></i> </div>

希望这会有所帮助。

当我使用JavaScript多次点击按钮时，无法显示div

4 个答案: