在jQuery中我需要做一个if语句来查看$ this是否不包含类“.selected”。jQuery如果DIV没有类“x”
$(".thumbs").hover(function(){
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);
});
基本上当该功能运行（悬停）我不想当这个类的.selected“已被追加到div执行变淡，这将意味着图像将在全不透明度表示它已被选中。搜索在谷歌没有运气，即使它是如何使用IF语句一个简单的问题...
jQuery的有hasClass（）函数日在返回true，如果在包装的集合中的任何元素包含指定类
if (!$(this).hasClass("selected")) {
//do stuff
}
Take a look at my example of use
这里不再工作是它的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
</style>
<!-- jQuery code here -->
<script type="text/javascript">
$(function() {
$('#myButton').click(function(e) {
$('#div2').addClass('selected');
});
$('.thumbs').bind('click',function(e) { alert('You clicked ' + e.target.id); });
$('.thumbs').hover(fadeItIn, fadeItOut);
});
function fadeItIn(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('normal', 1.0);
}
}
function fadeItOut(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('slow', 0.3);
}
}
</script>
</head>
<body>
<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;">
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;">
Another one with a thumbs class
</div>
<input type="button" id="myButton" value="add 'selected' class to red div" />
</body>
</html>
编辑：
这只是一种猜测，但你想achieve something like this ？
jQuery代码是这里 -
$(function() {
$('.thumbs').bind('click',function(e) { $(e.target).toggleClass('selected'); });
$('.thumbs').hover(fadeItIn, fadeItOut);
$('.thumbs').css('opacity', 0.3);
});
function fadeItIn(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('normal', 1.0);
}
}
function fadeItOut(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('slow', 0.3);
}
}
<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;">
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;">
Another one with a thumbs class
</div>
你也可以使用addClass和removeClass方法在标签之类的项目之间切换。
例如
if($(element).hasClass("selected"))
$(element).removeClass("selected");
如果不是在事件内部使用if，而是在应用select类时解除绑定事件？ 我猜你添加类代码内的某处，所以解除绑定事件有是这样的：
$(element).addClass('selected').unbind('hover');
唯一的缺点是，如果你曾经从元素中删除所选类别中，你必须再次将其订阅到悬停事件。
$(".thumbs").hover(
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("normal", 1.0);
}
},
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("slow", 0.3);
}
}
);
把一个如果在悬停的每个部分内部，将允许您动态地更改选择类，悬停仍然工作。
$(".thumbs").click(function() {
$(".thumbs").each(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).hover();
}
});
$(this).addClass("selected");
});
作为一个例子，我还附加了一个点击处理程序，将选定的类切换到点击的项目。然后我在前一个项目上触发悬停事件，使其淡出。
当你正在检查一个元素是否具有或不具有类，请确保你没有不小心把一个点在类名：
<div class="className"></div>
$('div').hasClass('className');
$('div').hasClass('.className'); #will not work!!!!
后我的代码凝视时间长我意识到我已经做到了。像这样的一个错字让我花了一个小时弄清楚我做错了什么。检查你的代码！
我觉得作者在寻找：
$(this).not('.selected')
思考，如果OP在一些点添加类到div后的document.ready话，我不认为你的语法，将工作 – 2009-02-06 14:06:42
此外，还有多个div叫做.thumbs .... – zuk1 2009-02-06 14:14:07
@ zuk1：那么，从你的片段中，你可以将所有元素放在class'thumb'中，然后在每个元素上做一个悬停（）。你是说你只想在一个元素上悬停？那一个元素是什么？我很困惑。 – alphadogg 2009-02-06 14:57:00