3 
<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，但它不起作用，是什么问题？

4

6 回答 6

2

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

没有显式绑定

您正在使用内联代码：

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

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

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

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

没有足够的 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);"和内联代码。相反，我添加了一个类来定位锚点；如果链接仅在文档中出现一次，您可能需要考虑使用唯一标识符。一旦文档准备好，点击处理程序就会被附加。

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

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

于 2013-07-08T07:16:08.957 回答
1

您需要发送对调用函数的引用

 ... onclick="ToggleClass(this);"...


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

但是我总是更喜欢使用点击功能而不是内联 javascript

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

<script>
   $('#ToggleClass').click(function(){
      if($(this).hasClass("bold"))
            $(this).removeClass("bold");
    else
            $(this).addClass("bold");
  });
</script>
于 2013-07-08T06:53:08.080 回答
1

您正在使用内联onclick处理程序。您的 HTML：

onclick="ToggleClass();"

类似地解释：

element.onclick = function(event) {
    //`this` is available inside the onclick method
    ToggleClass(); //but it is not passed to called functions automatically
}

您只是在调用一个函数，因此在此执行this中未设置引用。ToggleClass“未设置”是指在ES 方面：输入未定义的函数代码this意味着this引用将指向window对象，或者undefined在严格模式下。

this为函数执行上下文设置引用的一种方法是使用Function.callor Function.apply：

onclick="ToggleClass.call(this, event);"

在此处阅读有关该this关键字的更多信息。

*event您的代码不需要，但事件处理程序通常希望接收一个事件对象，因此无论如何我都会传递它。

但是，您已经在使用 jQuery，它this在事件处理程序中设置引用并包装事件对象以使其方法跨浏览器。因此，您只需将 JS 挂钩添加到您的元素并通过 jQuery 附加侦听器：

<a href="#" class="js-toggleClass">Toggle class</a>
<script>
$('.js-toggleClass').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('bold');
});
</script>

演示

我已经用href="javascript:void(0)"jQuery Event 对象的preventDefault()方法替换了你，因为 JavaScript 不属于内部href属性，并使用 jQuery.toggleClass()方法来简化你的逻辑。

这样做的好处是结构 (HTML) 和行为 (JS) 之间的分离，从而使您的代码更加有条理和模块化。

于 2013-07-08T07:21:32.820 回答
1

使用jQuery实现应该像使用.toggleClass()实用程序方法一样简单：

<a href="#" id="toggleme">Toggle class</a>
<script type="text/javascript">
jQuery(function($)
{
    $('#toggleme').click(function()
    {
        $(this).toggleClass('bold');
    });
});
</script>
于 2013-07-08T06:59:46.883 回答
-2

在函数中发送当前对象，toggleClass()如下所示：

ToggleClass(this)

切换类

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

我希望它会帮助你

于 2013-07-08T06:56:58.697 回答
-2

您正在调用函数 ToggleClass()，但调用 ToggleClass() 函数时没有传递参数，调用 ToggleClass() 时传递引用，否则 JQuery 中存在内置函数。

于 2013-07-08T07:00:16.793 回答