有'循环从元素中删除包含类名的类名，否则不执行任何操作

Have a 'for' loop remove class name from element if it contains that name, otherwise, do nothing

本文关键字：操作 任何 执行 包含类 循环 删除 元素      更新时间：2023-09-26

我有一个按钮列表，当单击一个按钮时，该按钮的类名将改变以将其移动到屏幕上，并引入一个'back'按钮，其目的是在单击时将先前单击的按钮返回到其他按钮行，然后返回按钮再次隐藏。当用户单击'back'按钮时，除了被单击的按钮不返回列表外，一切都工作。我假设这是for循环的问题，但它在我的头脑中是有道理的。脚本如下:

//Variables
var back = document.getElementById('back');
var button = document.getElementsByTagName('li');
var i;
/*moves button that was clicked to center of page
and changes class of hidden back button to make it show*/
//works fine 
function moveButton(e) {
'use strict';
var target = e.target;
target.classList.add('second_pos');
back.className = 'back';
}
//removes back button and returns active button to top
//Does remove back button but loop doesn't work on other button
function goBack() {
back.className = 'back_hidden';
 for ( i = 0; i < button.length; i++) {
  if (button[i].classList.contains('second_pos')) {
    button[i].classList.remove('second_pos');
  } else {
   return;
  }
 }
}
//Event Listener for main buttons
for (i = 0; i < button.length; i++) {
  button[i].addEventListener('click', moveButton, false);
}
// Event listener for back button
 back.addEventListener('click', goBack, false);

这里是css

.demo_space {
  display:table;
  position:relative;
  height:100vh;
  width:90%;
  margin:0 auto;
  ul {
    display:table-cell;
    height:100vh;
    width:100vw;
    li {
      display:inline-block;
    }
  }
}
.first_pos {
  float:left;
  font-size:2em;
  padding:1em;
  color:$green;
}
.second_pos {
  position:absolute;
  bottom:50%;
  left:50%;
}

只删除else部分，因为它打破了循环。

for (i = 0; i < button.length; i++) {
  if (button[i].classList.contains('second_pos')) {
    button[i].classList.remove('second_pos');
  } // else {
    // return;
  // }
}
相关文章：