Sti*_*chy 1 jquery class function
我正在制作一个似乎不起作用的简单交换按钮.
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>
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
我错过了一些明显的东西吗?:)
你不使用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' );
}
}
Run Code Online (Sandbox Code Playgroud)
此外,您不应使用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' );
}
});
Run Code Online (Sandbox Code Playgroud)
最后,(试图在这里做得很好!)你应该阅读一个很好的jQuery教程,因为它似乎还没有完全掌握使用该库所需的技术.
| 归档时间: |
|
| 查看次数: |
10185 次 |
| 最近记录: |