未定义不是函数（jQuery 添加/删除类）答案

【问题标题】：Undefined is not a function (jQuery add/remove class)未定义不是函数（jQuery 添加/删除类）
【发布时间】：2014-05-25 06:23:01
【问题描述】：

我正在制作一个似乎不起作用的简单交换按钮。

HTML

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>
<a onclick="paid(123);" class="no" id="123"></a>
<a onclick="paid(124);" class="yes" id="124"></a>
<a onclick="paid(125);" class="no" id="125"></a>
</body>
</html>

JAVASCRIPT

<script type="text/javascript">
function paid(currentId) {

if (document.getElementById(currentId).hasClass("no")) {
    document.getElementById(currentId).removeClass( 'no' ); 
    document.getElementById(currentId).addClass( 'yes' );   
}

else if (document.getElementById(currentId).hasClass("yes")) {
    document.getElementById(currentId).removeClass( 'yes' );    
    document.getElementById(currentId).addClass( 'no' );    
}

}
</script>

我在这里遗漏了一些明显的东西吗？ :)

【问题讨论】：

尽量避免定义以数字开头的id

标签： jquery function class

【解决方案1】：

您没有使用 jQuery 来选择这些元素，因此它们没有 hasClass、removeClass 和 addClass 方法。它们只是 DOM 元素。改用这个：

function paid(currentId) {

// Select the element using jQuery
var $elem = $("#"+currentId);

if ($elem.hasClass("no")) {
    $elem.removeClass( 'no' ); 
    $elem.addClass( 'yes' );   
}

else if ($elem.hasClass("yes")) {
    $elem.removeClass( 'yes' );    
    $elem.addClass( 'no' );    
}

}

此外，您不应使用onclick 属性。您应该改用 jQuery 语法：

$("a").on("click", function() {
    if ($(this).hasClass("no")) {
        $(this).removeClass( 'no' ); 
        $(this).addClass( 'yes' );   
    }

    else if ($(this).hasClass("yes")) {
        $(this).removeClass( 'yes' );    
        $(this).addClass( 'no' );    
    }
});

最后，（在这里努力表现得很好！）您应该阅读一个很好的 jQuery 教程，因为您似乎还没有完全掌握使用该库所需的技术。

【讨论】：

谢谢！效果很好:) 我会在 10 分钟内接受答案

【解决方案2】：

您可以像这样使用jQuery，而不是创建函数paid()：

jQuery(document).ready(function(){
    jQuery('a').click(function(){
        jQuery(this).toggleClass('yes');
        jQuery(this).toggleClass('no');
    })
})

这会将点击事件绑定到 Anchor 标记并切换类。

【讨论】：

【解决方案3】：

纯 javascript 解决方案将是这样的：

HTML

<a onclick="paid(this);" class="no" id="123">Link1</a>
<a onclick="paid(this);" class="yes" id="124">Link1</a>
<a onclick="paid(this);" class="no" id="125">Link1</a>

jQuery

function paid(current) {
   if(current.className == "no") {
      current.className = 'yes';
   } else if(current.className == "yes") {
      current.className = 'no';
   }
}

Fiddle

【讨论】：