Fatal编程技术网
  • javascript/
  • Javascript 试图理解这个toggleClass（）函数

Javascript 试图理解这个toggleClass（）函数

javascript jquery

Javascript 试图理解这个toggleClass（）函数,javascript,jquery,Javascript,Jquery,有关职能： function toggleElementClass(element, className) { if (element.className.indexOf(className) > -1) { element.className = element.className.replace(new RegExp(className, 'g'), ''); } else { element.className += " " + className; }} 我正试图

有关职能：

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中current.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>


你好，普朗克！
函数toggleElementClass（元素，类名）{
var regex=new RegExp（'\\b'+className+'\\b'，g'）；
if（regex.test（element.className））{
element.className=element.className.replace（regex.）；
}否则{
element.className+=“”+className；
};
};
$（“h1”）。单击（函数（）{
toggleElementClass（本“测试”）
})
尽管搜索
foo
和
football
类时会出现误报，但在大多数情况下，逻辑都是正确的

代码的具体问题在于如何将
单击事件附加到
h1
。当前，您正在设置对事件处理程序的函数调用的结果，而不是函数引用。这意味着函数在加载时立即被调用，并且作用域不是您期望的（它是
窗口而不是
h1
），因此您会收到“未定义”错误

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



函数切换ElementClass（元素，类名）{
if（element.className.indexOf（className）>-1）{
element.className=element.className.replace（新的RegExp（className，'g'），“”）；
}否则{
element.className+=“”+className；
};
};
$（“h1”）。单击（函数（）{
toggleElementClass（本“a”）
})


.a{
颜色：#c00；
}




你好，普朗克以下是一些问题：


    

  • 您将获得部分类名匹配的误报（搜索
    foo
    ，将匹配
    foobar
    ）。如果要解决此问题，请小心操作，因为必须允许使用多种空间分隔符
    • 

  • 替换将留下额外的空间，这不是很大，但可以加起来
    • 

  • 您使用的正则表达式假设类名不包含任何特殊的正则表达式字符。你已经得到了索引，为什么不使用它呢？你需要一个循环来确保它们都被移除，但这样会更安全
    • 

如果您正在引用jQuery，那么首先为什么要重新编写
toggleClass（）
？此外，您的plunkr工作正常-问题是您不能在
单击（）
中包含带有参数的函数-通过包含
（）
，您正在执行函数，而不是传递它。您需要将它包装在一个匿名函数中：
function（）{functionHere（p1，p2）；}
即使确实删除了，它也是危险的，即：
toggleElementClass（e，'col'）
，由于
RegExp（）
，使得元素
成为
。如果您不想使用jQuery（我对此表示赞赏），可以使用。如果你不太关心IE9-，你可以开箱即用，如果你需要支持一个特定的旧浏览器，也可以使用polyfill。这个问题纯粹是为了我自己的理解。不打算重新写入。谢谢你的意见！！！逻辑可能很好，但实现却不是
toggleClass（“foo”）
会很高兴地“切换”类
foo
中的
foo
。啊，是的，没错。我会更新一条关于这方面的说明。你介意扩展一下假阳性方面吗？非常有趣。提前谢谢！假设您有
并搜索类
foo
。您将在
football
的
foo
上进行匹配，因此输出将是
。因此，我强烈建议您不要使用函数，而是使用两种较低的方法之一。jQuery似乎最合适，因为您已经在使用jQuery了谢谢Rory！这纯粹是为了我的理解。不打算使用该函数。只是试着分析它有什么问题，我很难辨别。主要是因为我不熟悉正则表达式。谢谢spanky，那么你会说使用索引而不是正则表达式将是替换元素更安全的方法吗？@KyleD.Fiala：我会这么说，也可能比动态创建正则表达式更快。将需要更多的工作来设置和正确，但对于这样的库函数，我认为它是有意义的。