个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
有问题的功能:
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>
最佳答案
虽然在搜索 foo 和可用的 football 类时会出现误报，但大多数情况下逻辑都很好。
您的代码的具体问题在于您如何将 click 事件附加到 h1。当前，您将函数调用的结果 设置为事件处理程序，而不是函数引用。这意味着该函数在加载时立即被调用并且范围不是您所期望的(它是 window 而不是 h1)因此您收到“未定义”错误.
要解决此问题，您需要将点击事件处理程序包装在匿名函数中:
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>关于javascript - 试图理解这个 toggleClass() 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46058396/
25
4
0
我是 C++ 的新手，我在使用这段代码时遇到了问题: string output_date(int day, int month, int year){ string date; if
所以我这样做了 tar cvzf test.zip FP 为了创建目录 FP 的 zip 但是，它会列出 zip 中的目录 FP/ FP/php/ FP/php/pdf/ FP/php/docs/ F
我正在尝试在 Swift、Xcode 7.3(所以是 Swift 2.2)中创建一个通用类，但我似乎无法让它通过编译器: protocol Struct1Protocol { } struct Str
我的测试用例是这样的: class FooTest extends PHPUnit_Framework_TestCase { /** @covers MyClass::bar */ f
我正在尝试将brew install wine作为使electron-builder工作的一步。但是我所能得到的只是以下响应: ==> Installing dependencies for wine
我这样做: string[,] string1 = {{"one", "0"},{"Two", "5"},{"Three","1"}}; int b = 0; for(int i = 0; i <=
我正在尝试使用 SetWindowsHookEx 键盘 Hook Notepad.exe。 如您所见，工作线程正在将其 ASCII 代码(即 wParam)发送到指定的服务器。 UINT WINAPI
我正在尝试将 ListView 实现到我的 Fragment 中，但无论我尝试什么，我都会得到一个 NullPointerException。我检查对象是否为 null 并记录是否为 null，看起来
我尝试在一行中对齐两个 div。使用 float left 属性，一切顺利。但是当我在 div 中使用图像时，它开始产生问题。 所以这是我的示例代码:- Some headi
我目前正在使用此代码来获取图像的灰度图像表示并以 (512, 370, 1) 的格式表示它大批。 img_instance = cv2.imread(df.iloc[i][x_col]) / 255.
总结 我正在创建一个简单的应用程序，它允许用户选择一个包含顶级窗口的进程。用户首先键入 native DLL(而非托管 DLL)的路径。然后用户键入将在 Hook 过程中调用的方法的名称。该方法不得返
我是一名优秀的程序员,十分优秀！