Question

<button id="friends" class="btn btn-primary large3">Friends</button>

setInterval(changeFriendBtnSize, 1000);

  function changeFriendBtnSize() {
    let upDown = 'up';
    if (document.getElementById('friends').getElementsByClassName('large3')) {
      console.log('111');
      document.getElementById('friends').classList.remove('large3');
      document.getElementById('friends').classList.add('large4');
    } else if (document.getElementById('friends').getElementsByClassName('large4')) {
      console.log('222');
      document.getElementById('friends').classList.remove('large4');
      document.getElementById('friends').classList.add('large3');
    }
  }

在我的控制台日志中，它每秒都会一遍又一遍地记录111，但从不记录222.类big3被删除，而large4被添加，但从来没有相反，为什么？

Answer 1

表达式

document.getElementById('friends').getElementsByClassName('large3')

始终返回节点列表。该列表可能为空，但它仍然是对象引用，永远不会测试为false。

据我所知，.getElementsByClassName()不是您正在寻找的API。您的代码显然想要检查按钮当前具有哪个类;要做到这一点，您要查看classList .contains()：

if (document.getElementById('friends').classList.contains('large3'))

或其他什么。

Answer 2

document.getElementById('friends').getElementsByClassName('large3')找到类＆＃34; large3＆＃34;的元素在id＆＃34; friends＆＃34; （并始终返回节点列表），例如：

<div id="friends"><div class="large3"></div></div>

您正在查找classList是否包含large3：

if (document.getElementById('friends').classList.contains("large3"))

和

else if (document.getElementById('friends').classList.contains("large4"))

Answer 3

您可以使用classList.toggle()大大简化此操作。

<button id="friends" class="btn btn-primary large3">Friends</button>

setInterval(changeFriendBtnSize, 1000);

function changeFriendBtnSize() {
  var elt = document.getElementById('friends');

  elt.classList.toggle('large3');
  elt.classList.toggle('large4');
}

出于某种原因，很多人已经学会了classList.add和classList.remove，但没有classList.toggle，这证明是非常有用的，尤其是第二个参数让你写

elt.classList.toggle('cls', bool);

而不必写

if (bool) elt.classList.add('cls');
else elt.classList.remove('cls');

Answer 4

在你的情况下，你正在寻找朋友内的孩子，这是.getElementsByClassName所做的。相反，您需要检查friends元素是否包含类名：

像这样：

document.getElementById('friends').classList.contains('large3')

为什么我的Javascript setInterval函数中的else语句不起作用？

4 个答案: