在jQuery中，我需要做一个if语句，看看$this是否不包含类'.selected'。
$(".thumbs").hover(function(){
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);
});
基本上，当这个函数运行(悬停)，我不想执行淡入如果类。Selected '被附加到div中，这将意味着图像将处于完全不透明度，以表示它被选中。在谷歌上搜索没有运气，即使这是一个如何使用IF语句的简单问题…
当前回答
$(".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");
});
作为一个例子，我还附加了一个单击处理程序来将所选类切换到所单击的项目。然后在前一项上触发悬停事件，使其淡出。
其他回答
$(".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");
});
作为一个例子，我还附加了一个单击处理程序来将所选类切换到所单击的项目。然后在前一项上触发悬停事件，使其淡出。
如果不是在事件内部使用if，而是在应用选择类时解除事件绑定，如何? 我猜你在你的代码中添加了类，所以解绑定事件看起来像这样:
$(element).addClass( 'selected' ).unbind( 'hover' );
唯一的缺点是，如果您从元素中删除所选类，则必须再次将其订阅到hover事件。
jQuery有hasClass()函数，如果包装集中的任何元素包含指定的类，该函数将返回true
if (!$(this).hasClass("selected")) {
//do stuff
}
看看我的例子
如果你将鼠标悬停在一个div上，它将淡出为 正常速度到100%不透明度，如果 Div不包含“selected” 类 如果你悬停在一个div上，它就会消失 在慢速至30%不透明度时 Div不包含“selected” 类 点击按钮添加" 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>
编辑:
这只是一个猜测，但你是在尝试实现这样的东西吗?
这两个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>
当你检查一个元素是否有类时，确保你没有不小心在类名中放了一个点:
<div class="className"></div>
$('div').hasClass('className');
$('div').hasClass('.className'); #will not work!!!!
在盯着我的代码看了很长时间之后，我意识到我已经做到了。像这样的一个小错字，我花了一个小时才弄清楚我写错了什么。检查您的代码!
您还可以使用addClass和removeClass方法在选项卡等项之间进行切换。
e.g.
if($(element).hasClass("selected"))
$(element).removeClass("selected");
