当您多次点击条形图标时，您不能带十字图标。
当您单击栏图标时，会出现一个十字图标。当您单击新的十字图标时，会出现条形图标。到目前为止，一切都很好。但是，当您再次单击栏图标时，没有任何反应。
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>最佳答案
这不是绑定(bind)事件的正确方法。不要在嵌套函数中使用事件绑定(bind)。这不是一个好习惯
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。
关于javascript - 使用JavaScript多次单击按钮时无法带上div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59176971/