我正在制作一个似乎无法正常工作的简单交换按钮。
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>
我错过了一些明显的东西吗? :)
答案 0 :(得分:8)
您没有使用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教程,因为你似乎还没有完全掌握使用该库所需的技术。
答案 1 :(得分:0)
不是创建函数paid()
,而是可以像这样使用jQuery:
jQuery(document).ready(function(){
jQuery('a').click(function(){
jQuery(this).toggleClass('yes');
jQuery(this).toggleClass('no');
})
})
这会将click事件绑定到Anchor标记并切换Classes。
答案 2 :(得分:0)
纯粹的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';
}
}