jQuery如果DIV没有类“x”
在jQuery中，我需要做一个if语句来查看$ this是否不包含类“.selected”。
$(".thumbs").hover(function(){ $(this).stop().fadeTo("normal", 1.0); },function(){ $(this).stop().fadeTo("slow", 0.3); }); 基本上，当这个函数运行（hover）时，如果类“.selected”已经附加到div，我不想执行淡入淡出，这将意味着图像将完全不透明，表示它被选中。 在Google上search不到运气，即使这是一个如何使用IF语句的简单问题…
使用“不 ”select器。
例如，而不是：
$(".thumbs").hover()
尝试：
$(".thumbs:not(.selected)").hover()
jQuery hasClass（）函数返回true，如果包装集中的任何元素包含指定的类
if (!$(this).hasClass("selected")) { //do stuff }
看看我的使用例子
- 如果您将光标hover在div上，则如果div不包含“selected”类，则会将其作为正常速度淡化为100％不透明度
- 如果您hover在一个div上，如果div不包含“selected”类，则它会以低速缓慢降至30％不透明度
- 单击该button将“选定”类添加到红色的div。 褪色效果不再适用于红色的div
这是它的代码
<!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>
编辑：
这只是一个猜测，但你是否想要实现这样的事情 ？
- 两个div开始在30％的不透明度
- 徘徊在一个分区褪色到100％的不透明度，徘徊退色到30％的不透明度。 淡入淡出效果仅适用于没有“选定”类的元素
- 点击div添加/删除“select”类
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>
我认为作者正在寻找：
$(this).not('.selected')
当你检查一个元素是否有class级时，确保你没有在class级名称中不小心加上一个点：
<div class="className"></div> $('div').hasClass('className'); $('div').hasClass('.className'); #will not work!!!!
经过很长时间的盯着我的代码，我意识到我已经做到了。 像这样的一个错字花了我一个小时，弄清楚我做错了什么。 检查你的代码！
$(".thumbs").hover( function(){ if (!$(this).hasClass("selected")) { $(this).stop().fadeTo("normal", 1.0); } }, function(){ if (!$(this).hasClass("selected")) { $(this).stop().fadeTo("slow", 0.3); } } );
把一个如果在hover的每个部分的内部将允许你dynamic地改变select类，hover将仍然工作。
$(".thumbs").click(function() { $(".thumbs").each(function () { if ($(this).hasClass("selected")) { $(this).removeClass("selected"); $(this).hover(); } }); $(this).addClass("selected"); });
作为一个例子，我还附加了一个点击处理程序，将选定的类切换到点击的项目。 然后，我将上一个项目上的hover事件触发，使其淡出。
您也可以使用addClass和removeClass方法在各个选项卡之间切换。
例如
if($(element).hasClass("selected")) $(element).removeClass("selected");
如果不是在事件内部使用if，而是在应用select类时解除绑定事件？ 我猜你在你的代码里添加了这个类，所以在这里解除事件会看起来像这样：
$(element).addClass( 'selected' ).unbind( 'hover' );
唯一的缺点是，如果您从元素中删除选定的类，则必须再次将其订阅到hover事件。
