Question

我想编写一个函数来获取活动类的所有dom元素并删除该类。我试图通过循环遍历从getElementsByClassName（'active'）获得的数组并使用replace将其替换为空格来使用replace方法。两个问题：为什么不删除活动类的替换方法以及使用vanilla js删除类的更好的替代方法。

function removeItem(){
  var activeItems = document.getElementsByClassName('active');
  for (i=0; i<activeItems.length; i++){
    var activeClass = activeItems[i].className;
    activeClass.replace('active', '')
  }
}

Answer 1

.replace()返回一个必须存储的字符串，它不会覆盖该变量。

activeClass = activeClass.replace('active','');  // this will still need to be set as the classname

这样的事情：

function removeClass(){
  var activeItems = document.getElementsByClassName('active');

  for (var i=0,n=activeItems.length; i<n; i++){
     var classes = activeItems[i].className.split(' ') || [];
     for (var j=0,l=classes.length; j<l; j++){
        if(classes[j] === 'active') {
           classes.splice(j,1);
           j--;l--; // we popped a value off the stack
        }
     }
     activeItems[i].className = classes.join(' ');
  }
}

或zzzzBov建议，去土生土长：

activeItems[i].classList.remove('active');

Answer 2

字符串在Javascript中按值传递。您必须设置更改的字符串。此外，.replace不会更改字符串，但会返回新字符串。

activeItems[i].className = activeItems[i].className.replace('active', '');

Answer 3

您忘了再次分配className。

activeItems[i].className = activeClass.replace(/(?:\s*)(active\s*)/, '');

请注意，getElementsByClassName()可能无法在较旧的浏览器中使用。

原始JavaScript想法：

var doc = document;
function getClass(class){
  if(doc.getElementsByClassName){
    return doc.getElementsByClassName(class);
  }
  else{
    var tags = doc.getElementsByTagName('*'), l = tags.length, r = [];
    if(l < 1){
      return false;
    }
    else{
      var x = new RegExp('(^|\\s+)'+class+'(\\s+|$)');
      for(var i=0; i<l; i++){
        var tag = tags[i];
        if(tag.className.match(x)){
          r.push(tag);
        }
      }
      return r;
    }
  }
}
function removeClass(class){
  var cls = getClass(class), x = new RegExp('(^|\\s+)'+class+'(\\s+|$)');
  for(var i=0,l=cls.length; i<l; i++){
    var c = cls[i];
    c.className = c.className.replace(x, '');
  }
}

Answer 4

您可以使用以下功能集添加和删除类名。普通的js，没有图书馆。

// Return true or false if el has className or not
function hasClassName (el, cName) {
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

// Add class to element if it doesn't have it already
function addClassName (el, cName) {
    if (!hasClassName(el, cName)) {
        el.className = trim(el.className + ' ' + cName);
    }
}

// Remove className from element if it has it
function removeClassName(el, cName) {
    if (hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = trim(el.className.replace(re, ''));
    }
}

// Remove leading and trailing whitespace, reduce remaining whitespace to
// a single character
function trim(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

为了让zzzzBov满意，这里使用空格而不是\s是相同的函数（也取消了对RegExp构造函数的依赖，所以也应该更快）。我建议坚持使用\s，因为我没有看到任何有说服力的论据，但让你自己选择。

// Return true or false if el has className or not
function hasClassName (el, cName) {
    return (' ' + el.className + ' ').indexOf(' ' + cName + ' ') != -1;
}

// Add class to element if it doesn't have it already
function addClassName (el, cName) {
    if (!hasClassName(el, cName)) {
        el.className = trimSpaces(el.className + ' ' + cName);
    }
}

// Remove className from element if it has it
function removeClassName(el, cName) {
    if (hasClassName(el, cName)) {
        el.className = trimSpaces((' ' + el.className + ' ').replace(' ' + cName + ' ', ' '));
    }
}

// Remove leading and trailing whitespace, reduce remaining whitespace to
// a single character
function trimSpaces(s) {
  return s.replace(/(^ +)|( +$)/g,'').replace(/ +/g,' ');
}

数组元素上的.replace不能在循环javascript中工作

4 个答案: