Jquery Onclick 不再发生第二次
我有点困惑为什么这不起作用；我认为因为我正在添加该类并且它没有被添加回集合中，所以我不确定。
这里它位于 jsbin http://jsbin.com/ayije 上，尽管代码也在下面。
无论哪种方式，我只能让该操作在一个元素上发生一次。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('.optional').click(function () {
$(this).removeClass('optional').addClass('selected');
return false;
});
$('.selected').click(function () {
$(this).removeClass('selected').addClass('rejected');
return false;
});
$('.rejected').click(function () {
$(this).removeClass('rejected').addClass('optional');
return false;
});
});
</script>
</head>
<body>
<style>
a {padding:2px;color:white;}
.optional {background-color:blue;}
.selected {background-color:green;}
.rejected {background-color:red;}
</style>
<div id="tagContainer">
<a href="#" class="rejected">a</a>
<a href="#" class="optional"">b</a>
<a href="#" class="selected">c</a>
</div>
</body>
</html>
I'm a bit confused as to why this isn't working; I assume that because I'm adding the class and its not being added back into the collection I'm not sure.
Here it is on a jsbin http://jsbin.com/ayije although code is below also.
Either way I can only get the action to happen on an element once.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('.optional').click(function () {
$(this).removeClass('optional').addClass('selected');
return false;
});
$('.selected').click(function () {
$(this).removeClass('selected').addClass('rejected');
return false;
});
$('.rejected').click(function () {
$(this).removeClass('rejected').addClass('optional');
return false;
});
});
</script>
</head>
<body>
<style>
a {padding:2px;color:white;}
.optional {background-color:blue;}
.selected {background-color:green;}
.rejected {background-color:red;}
</style>
<div id="tagContainer">
<a href="#" class="rejected">a</a>
<a href="#" class="optional"">b</a>
<a href="#" class="selected">c</a>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
不确定你是否已经知道这一点......检查 .live( ) 功能。这样，你就可以做这样的事情。
然后您不必担心文档加载时不存在的类。当元素上的类发生变化时，它们将自动绑定到。
Not sure if you already know about this or not.... Check the jquery documentation on the .live() functionality. That way, you could do something like this.
And then you don't have to worry about classes not existing at document load. As the classes change on the elements, they'll automatically be bound to.
这是因为单击处理程序仅应用于文档加载时匹配的那些元素。您应该使用单独的类来标识所有链接，然后设置一个单击处理程序来查看链接所具有的类，然后执行适当的类转换。
It's because the click handlers are only applied to those elements that match at document load. You should use a separate class to identify all of the links, then set up a single click handler that looks at the class that the link has and then does the appropriate class transformation.
你可以像这样改变你的代码
You can change your code like this
您还可以将点击处理程序更改为实时点击处理程序：
You can also change your click handler to the live click handler: