jQuery，如果DIV没有类“ x”

211

在jQuery中，我需要执行if语句来查看$ this是否不包含类'.selected'。

$(".thumbs").hover(function(){

$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);

});

基本上，当此函数运行时（悬停时），如果类'.selected'已附加到div上，我不想执行淡入淡出操作，这将意味着图像处于完全不透明状态以表示已选中该图像。即使是关于如何使用IF语句的简单问题，也没有在Google上搜索过运气...

jquery

— zuk1
source

359

使用“非 ”选择器。

例如，代替：

$(".thumbs").hover()

尝试：

$(".thumbs:not(.selected)").hover()

— 狗狗
source

考虑一下，如果OP在document.ready之后的某个时刻将类添加到div，那么我认为您的语法将不起作用

— Russ Cam 2009年

@ zuk1：好吧，从您的代码片段中，将所有带有“ thumb”类的元素都放在每个元素上，并进行hover（）。您是说要只在一个元素上悬停吗？那是一个要素吗？我很困惑。

— alphadogg

@鲁斯：对。如果使用上面的方法，那么它将在执行时获取DOM中当前的所有元素，对于那些具有“ thumb”类而不是“ selected”类的元素，它将执行hover（）。

— alphadogg

如果出于某种原因需要在选择器之外执行此操作，则可以使用，.not( ".selected" )并且它的工作原理相同。辉煌的东西。

— Joshua Pinter

180

jQuery具有hasClass（）函数，如果包装集中的任何元素包含指定的类，则返回true

if (!$(this).hasClass("selected")) {
    //do stuff
}

看看我的使用示例

如果将鼠标悬停在div上，如果div不包含“ selected”类，则它将以正常速度逐渐变为100％不透明度
如果您将鼠标悬停在div之外，如果该div不包含“ selected”类别，则它会以慢速渐隐至30％的不透明度
单击按钮将“选定”类添加到红色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％
将鼠标悬停在div上会淡入100％的不透明度，将鼠标悬停在div上便会变回30％的不透明度。淡入淡出效果仅适用于不具有“ selected”类的元素
单击div添加/删除“选定”类

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>

— 拉斯·卡姆
source

由于某些原因而无法使用:( $（“。thumbs”）。hover（function（）{if（！（$（this）.hasClass（“。selected”））{$（this）.stop（）。 fadeTo（“ normal”，1.0）;}，function（）{$（this）.stop（）。fadeTo（“ slow”，0.3）;}}）;并且它破坏了我的整个代码，所有JS都不兼容添加

— -zuk1

hasClass需要。吗？hasClass（'selected'）代替hasClass（'。selected'）

— bentewey

如果您使用“ selected”而不是“ .selected”，Russ的示例可能会起作用？

— alphadogg

道歉，并不意味着把。在那里。立即更新

— Russ Cam

我在答案中添加了一些示例，以显示代码正常工作

— Russ Cam

28

我认为作者正在寻找：

$(this).not('.selected')

— 抢劫
source

1

没想到这行得通。甚至像$（“。class1”）。not（“。class2”）这样工作，这正是我所追求的！谢谢！

— kravits88 2014年

3

它可以工作，但是值得注意的是，它不能返回布尔值，因为它返回一个数组。空数组在Javascript中是“真实的”。$(this).not('.selected').length如果确实愿意，可以将其用作布尔值，但这有点冗长。

— Joe Maffei

5

当您检查一个元素是否具有一个类时，请确保您没有在类名中不加点：

<div class="className"></div>

$('div').hasClass('className');
$('div').hasClass('.className'); #will not work!!!!

盯着我的代码很长时间后，我意识到我已经做到了。这样的小错字使我花了一个小时才弄清楚我做错了什么。检查您的代码！

— 安德鲁
source

1

$(".thumbs").hover(
    function(){
        if (!$(this).hasClass("selected")) {
            $(this).stop().fadeTo("normal", 1.0);
        }
    },
    function(){
        if (!$(this).hasClass("selected")) {
            $(this).stop().fadeTo("slow", 0.3); 
        }           
    }
);

将if置于悬停的每个部分内，将允许您动态更改select类，并且悬停仍将起作用。

$(".thumbs").click(function() {
    $(".thumbs").each(function () {
        if ($(this).hasClass("selected")) {
            $(this).removeClass("selected");
            $(this).hover();
        }
    });                 
    $(this).addClass("selected");                   
});

作为示例，我还附加了单击处理程序，以将选定的类切换到单击的项目。然后，我将鼠标悬停在上一个项目上，使其消失。

— 杰夫·亚当斯
source

0

您还可以使用addClass和removeClass方法在选项卡等项目之间切换。

例如

if($(element).hasClass("selected"))
   $(element).removeClass("selected");

— 塔瓦尼
source

为什么不只使用toggleClass（）？

— Russ Cam

1

因为该元素可能具有其他类。

— 塔瓦尼

0

当应用选择类时，取消绑定事件而不是在事件内部使用if怎么样？我猜想您将类添加到代码中的某个位置，因此取消绑定该事件的外观如下所示：

$(element).addClass( 'selected' ).unbind( 'hover' );

唯一的缺点是，如果您曾经从元素中删除所选的类，则必须再次将其订阅到悬停事件。

— 胡安
source