Javascript removeClass函数无法正常工作
我编写了一些函数,允许用户通过单击div来选择和取消选择div。现在,我试图做的是一个函数,一旦按下a,就会取消选择所有内容,但它只取消选择我的一些div。代码如下:Javascript removeClass函数无法正常工作,javascript,removeclass,Javascript,Removeclass,我编写了一些函数,允许用户通过单击div来选择和取消选择div。现在,我试图做的是一个函数,一旦按下a,就会取消选择所有内容,但它只取消选择我的一些div。代码如下: var divs = document.getElementsByClassName('fuori'); for(i = 0, j = divs.length; i < j; i++){ divs[i].addEventListener('click', function(){ if(!hasClass(this,
var divs = document.getElementsByClassName('fuori');
for(i = 0, j = divs.length; i < j; i++){
divs[i].addEventListener('click', function(){
if(!hasClass(this, 'selected')){
this.className = this.className + " selected";
} else {
removeClass(this, 'selected');
}
});
}
这就是全部
function deselectAll(){
var selected = document.getElementsByClassName('selected');
alert(selected.length);
for (i = 0; i < selected.length; i++){
removeClass(selected[i], 'selected');
}
}
通过单击进行选择和取消选择可以无缝地工作,但是当我选择一些div并按下a时,它不会取消选择每个div,而是只取消选择其中的一些div
我怎样才能解决这个问题?为什么它不起作用
谢谢大家! 尝试将其更改为循环:
GetElementsByCassName的返回值是一个节点列表,而不是一个数组,并且是活动的。这意味着当您通过删除类来更改DOM时,您也在更改列表
通过倒退,你可以避免问题。您也可以这样做:
while (selected.length) removeClass(selected[0], 'selected');
顺便说一下,用于删除类的正则表达式可能更简单:
function removeClass(ele,cls) {
var reg = new RegExp('\\b' + cls + '\\b', 'g');
ele.className=ele.className.replace(reg,' ');
}
在JavaScript正则表达式中,\b表示单词边界。调用hasClass也没有意义,因为如果类字符串不存在,替换将不会起任何作用
编辑-在评论中指出,这不适用于带有嵌入连字符的类名,这是一种常见的约定。如果你需要解决这个问题,那么我认为这会起作用:
function removeClass(ele,cls) {
var reg = new RegExp('\\b' + cls.replace(/-/g, '\\b-\\b') + '\\b', 'g');
ele.className=ele.className.replace(reg,' ');
}
或者该主题的一些变体。尝试更改循环:
GetElementsByCassName的返回值是一个节点列表,而不是一个数组,并且是活动的。这意味着当您通过删除类来更改DOM时,您也在更改列表
通过倒退,你可以避免问题。您也可以这样做:
while (selected.length) removeClass(selected[0], 'selected');
顺便说一下,用于删除类的正则表达式可能更简单:
function removeClass(ele,cls) {
var reg = new RegExp('\\b' + cls + '\\b', 'g');
ele.className=ele.className.replace(reg,' ');
}
在JavaScript正则表达式中,\b表示单词边界。调用hasClass也没有意义,因为如果类字符串不存在,替换将不会起任何作用
编辑-在评论中指出,这不适用于带有嵌入连字符的类名,这是一种常见的约定。如果你需要解决这个问题,那么我认为这会起作用:
function removeClass(ele,cls) {
var reg = new RegExp('\\b' + cls.replace(/-/g, '\\b-\\b') + '\\b', 'g');
ele.className=ele.className.replace(reg,' ');
}
或者这个主题的一些变化。我不想,我想练习香草javascript,不要忘记如何编写它,也不想加载很多不需要的功能。这很公平。尽管jQuery是一个轻量级框架,但它使事情变得更加简单。例如,$'p'.removeClass'myClass yourClass'Ref.是的,我知道如何在jquery中实现这一点,但就是不想。我没有最后期限,所以我不着急,通过使用vanilla js,我有机会在这方面做得更好。我不想,我想练习vanilla javascript,不要忘记如何编写它,也不想加载很多不需要的功能。这很公平。尽管jQuery是一个轻量级框架,但它使事情变得更加简单。例如,$'p'.removeClass'myClass yourClass'Ref.是的,我知道如何在jquery中实现这一点,但就是不想。我没有最后期限,所以我不着急,通过使用vanilla js,我有机会在这方面做得更好?我还有一个类似的功能也可以使用。。。非常感谢你的帮助,但是如果这不是问题的话,我希望得到更深入的解释。当你继续递增i时,你会跳过一些。为什么?因为每次调用removeClass都会使列表缩短1。因此,您只需从列表的每个其他元素中删除该类。换句话说,从位置0的元素中删除类后,它将不再位于列表中,而位置1的元素将位于位置0。如果将i增加到1,则跳过该元素。我相信对于包含破折号的类名,例如非常愚蠢的类,使用\\b将失败。至少这是我在IE中看到的。@Will-hey good point-我会在找到解决这个问题的好方法后尽快更新答案:-为什么我会后退来避免这个问题?我还有一个类似的功能也可以使用。。。非常感谢你的帮助,但是如果这不是问题的话,我希望得到更深入的解释。当你继续递增i时,你会跳过一些。为什么?因为每次调用removeClass都会使列表缩短1。因此,您只需从列表的每个其他元素中删除该类。换句话说,从位置0的元素中删除类后,它将不再位于列表中,而位置1的元素将位于位置0。如果将i增加到1,则跳过该元素。我相信对于包含破折号的类名,例如非常愚蠢的类,使用\\b将失败。至少这是我在IE中看到的。@Will-hey good point-我会在找到解决问题的好方法后尽快更新答案:-