Question

在jQuery中我需要做一个if语句来查看$ this是否包含类'.selected'。

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

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

});

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

Answer 1

使用"not“选择器。

例如，而不是：

$(".thumbs").hover()

尝试：

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

Answer 2

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

，则返回true

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

Take a look at my example of use

如果你将鼠标悬停在div上，它就会消失正常速度到100％不透明度如果 div不包含'selected' 类
如果你徘徊在div之外，它会消失如果速度慢到30％不透明度 div不包含'selected' 类
点击按钮添加'已选中' 上课到红色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>

修改

这只是一个猜测，但你想尝试achieve something like this吗？

两个div都以30％的不透明度开始

将鼠标悬停在div上以100％不透明度消失，徘徊消失至30％不透明度。淡化效果仅适用于没有“选定”类
的元素
点击div添加/删除 '选定'类

jQuery Code就在这里 -

$(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>

Answer 3

我认为作者正在寻找：

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

Answer 4

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

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

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

经过很长一段时间盯着我的代码，我意识到我已经做到了这一点。像这样的小错字花了我一个小时来弄清楚我做错了什么。检查你的代码！

Answer 5

$(".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，可以动态更改选择类，悬停仍然有效。

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

作为示例，我还附加了一个单击处理程序，用于将所选类切换为单击的项。然后我在上一个项目上触发悬停事件，使其淡出。

Answer 6

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

e.g。

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

Answer 7

如果不在事件中使用if，那么在应用select类时取消绑定事件怎么样？我猜你在代码里面添加了类，所以取消绑定事件会是这样的：

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

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

jQuery如果DIV没有类“x”

7 个答案: