javascript - jquery 中的一个自定义 ToggleClass() 问题

Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
.bold {
    font-weight: bold;
}

.blue {
    color: blue;
}
</style>

<a href="javascript:void(0);" onclick="ToggleClass();">Toggle class</a>

<script type="text/javascript">
function ToggleClass()
{        
    if($(this).hasClass("bold"))
    {
        $(this).removeClass("bold");
    }
    else
    {
        $(this).addClass("bold");
    }
}
</script>

问题:

我做了一个函数:ToggleClass，但是它不起作用，问题是什么？

Answer 1

它不起作用的原因有两个:

没有显式绑定(bind)

您正在使用内联代码:

<a href="javascript:void(0);" onclick="ToggleClass();">Toggle class</a>

即使 onclick 参数中的代码在正确的上下文中运行，函数调用也会在 window 的上下文中调用，即在 ToggleClass( )，默认情况下，this指的是window；就好像写了 ToggleClass.call(window) 一样。如果您愿意，可以将函数绑定(bind)到另一个对象:

<a href="javascript:void(0);" onclick="ToggleClass.call(this);">Toggle class</a>

使用 .call() 将当前元素绑定(bind)到函数，它将按预期工作。

jQuery 不够用

您没有以 jQuery 方式做事。

<a href="#" class="toggle-bold">Toggle class</a>
...
<script>
jQuery(function($) {
    $('.toggle-bold').on('click', function() {
        $(this).toggleClass('bold');
        return false; // prevent navigation to #
    });
});
</script>

我删除了 href="javascript:void(0);" 和内联代码。相反，我添加了一个类来定位 anchor ；如果链接只在文档中出现一次，您可能需要考虑一个唯一标识符。文档准备就绪后，将附加点击处理程序。

为了防止浏览器在末尾添加讨厌的 #，我从点击处理程序返回 false 以停止事件传播。

最后。我正在使用 toggleClass() 而不是 hasClass()、addClass() 和 removeClass() .