jQuery，如果DIV没有类“ x”


jQuery If DIV Doesn't Have Class “x”

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

1
2
3
4
5
6
7
$(".thumbs").hover(function(){

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

});

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

使用"非"选择器。

例如，代替：

$(".thumbs").hover()

尝试：

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

相关讨论

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

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

看看我的使用示例

  • 如果将鼠标悬停在div上，它会淡出为
    正常速度为100％不透明度，如果
    div不包含"选定"
    类
  • 如果您将鼠标悬停在div之外，它就会消失
    如果速度慢到30％不透明
    div不包含"选定"
    类
  • 点击按钮添加"已选择"
    课到红色div。褪色
    效果在红色div上不再起作用

这是它的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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">
Sandbox
<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);
 }
}



</head>
<body>
 
One div with a thumbs class


Another one with a thumbs class

<input type="button" id="myButton" value="add 'selected' class to red div" />
</body>
</html>

编辑：

这只是一个猜测，但是您是否正在尝试实现这样的目标？

  • 两个div的不透明度都开始于30％
  • 将鼠标悬停在div上会降低到100％的不透明度，将鼠标悬停在div上则会退回到30％的不透明度。淡入淡出效果仅适用于不具有" selected"类的元素
  • 单击div添加/删除
    "精选"课程

jQuery代码在这里-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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);
 }
}

 
One div with a thumbs class


Another one with a thumbs class
相关讨论

我认为作者正在寻找：

1
$(this).not('.selected')
相关讨论

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
$(".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类，并且悬停仍将起作用。

1
2
3
4
5
6
7
8
9
$(".thumbs").click(function() {
    $(".thumbs").each(function () {
        if ($(this).hasClass("selected")) {
            $(this).removeClass("selected");
            $(this).hover();
        }
    });                
    $(this).addClass("selected");                  
});

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

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

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

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

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

例如

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

相关讨论