Question

有问题的功能：

function toggleElementClass(element, className) {
if (element.className.indexOf(className) > -1) {
    element.className = element.className.replace(new RegExp(className, 'g'), '');
} else {
    element.className += " " + className;
}}

我正在尝试识别此代码的问题。我已经有过jQuery和JavaScript的经验，但到目前为止，我似乎无法得出可靠的结论。我已经看过很多使用jQuery当前.toggleClass（）函数的例子，但没有一个能帮我分析上面的代码。

我认为我可以识别的一个问题是它似乎永远不会删除一个类。只增加了更多，但我在尝试在plunker上测试时遇到了问题。任何帮助，将不胜感激。您可以通过此方法识别出哪些问题？

想要编辑：这个问题纯粹是出于我自己的理解。我不打算使用它或重写一个已经存在于jQuery中的工具！感谢所有到目前为止提交答案的人！

编辑：对于任何可能感兴趣的人。这不是一个完美的解决方案（在类之间添加空格，你切换的次数越多）。它似乎可以解决原始代码导致的误报！

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
  <body>
    <h1 class="football">Hello Plunker!</h1>
    <script>
      function toggleElementClass(element, className) {
        var regex = new RegExp('\\b' + className + '\\b', 'g');
        if (regex.test(element.className)) {
        element.className = element.className.replace(regex, '');
      } else {
        element.className += " " + className;
      };
    };

    $("h1").click(function() {
      toggleElementClass(this, "test")
    })
    </script>
  </body>
</html>

Answer 1

在大多数情况下，逻辑很好，但在搜索foo并且football类可用时会出现误报。

您的代码的具体问题在于如何将click事件附加到h1。目前，您正在将函数调用的结果设置为事件处理程序，而不是函数 reference 。这意味着该函数在加载时立即被调用，并且范围不是您所期望的（它是window而不是h1），因此您收到的是“未定义”错误。

要解决此问题，您需要将click事件处理程序包装在匿名函数中：

function toggleElementClass(element, className) {
  if (element.className.indexOf(className) > -1) {
    element.className = element.className.replace(new RegExp(className, 'g'), '');
  } else {
    element.className += " " + className;
  };
};

$("h1").click(function() {
  toggleElementClass(this, "a")
})

.a {
  color: #c00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="a">Hello Plunker!</h1>

这就是说 这个功能完全是多余的，因为你可以使用jQuery的toggleClass()：

$("h1").click(function() {
  $(this).toggleClass('a')
})

.a {
  color: #c00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="a">Hello Plunker!</h1>

或者您可以使用classList.toggle()：

document.querySelector('h1').addEventListener('click', function() {
  this.classList.toggle('a');
});

.a {
  color: #c00;
}

<h1 class="a">Hello Plunker!</h1>

Answer 2

以下是一些问题：

您将获得部分班级名称匹配的误报（搜索foo，将匹配foobar）。如果您解决了这个问题，请小心操作，因为您必须允许使用多种空间分隔符。
替换会留下额外的空间，这个空间并不大，但可以加起来。
您正在使用正则表达式，并假设类名不包含任何特殊的正则表达式字符。你已经获得了索引，为什么不使用它呢？你需要一个循环来确保它们都被删除，但它会更安全。

试图理解这个toggleClass（）函数

2 个答案: