jQuery 如果 DIV 没有类“x”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/520250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery If DIV Doesn't Have Class "x"
提问by zuk1
In jQuery I need to do an if statement to see if $this doesn't contain the class '.selected'.
在 jQuery 中，我需要执行一个 if 语句来查看 $this 是否不包含类“.selected”。
$(".thumbs").hover(function(){
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);
});
Basically when this function is run (on hover) I don't want to perform the fades if the class '.selected' has been appended to the div, this will mean that the image will be at full opacity to signify that it's selected. Searched on Google to no luck even though it's a simple question of how to use an IF statement...
基本上，当这个函数运行（悬停）时，如果类“.selected”已附加到 div，我不想执行淡入淡出，这意味着图像将处于完全不透明状态以表示它已被选中。在谷歌上搜索没有运气，即使这是一个如何使用 IF 语句的简单问题......
回答by alphadogg
回答by Russ Cam
jQuery has the hasClass() function that returns true if any element in the wrapped set contains the specified class
jQuery 具有 hasClass() 函数，如果包装集中的任何元素包含指定的类，则该函数返回 true
if (!$(this).hasClass("selected")) {
//do stuff
}
Take a look at my example of use
- If you hover over a div, it fades as normal speed to 100% opacity if the div does not contain the 'selected' class
- If you hover out of a div, it fades at slow speed to 30% opacity if the div does not contain the 'selected' class
- Clicking the button adds 'selected' class to the red div. The fading effects no longer work on the red div
- 如果您将鼠标悬停在 div 上，并且该 div 不包含“选定”类，则它会以正常速度淡化至 100% 不透明度
- 如果您将鼠标悬停在 div 之外，并且该 div 不包含“selected”类，则它会以慢速淡化至 30% 的不透明度
- 单击该按钮会将“选定”类添加到红色 div。淡入淡出效果不再适用于红色 div
Here is the code for it
这是它的代码
<!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>
EDIT:
编辑：
this is just a guess, but are you trying to achieve something like this?
这只是一个猜测，但您是否正在尝试实现这样的目标？
- Both divs start at 30% opacity
- Hovering over a div fades to 100% opacity, hovering out fades back to 30% opacity. Fade effects only work on elements that don't have the 'selected' class
- Clicking a div adds/removes the 'selected' class
- 两个 div 都以 30% 的不透明度开始
- 将鼠标悬停在 div 上会淡化为 100% 不透明度，将鼠标悬停在 div 上会淡化为 30% 不透明度。淡入淡出效果仅适用于没有 'selected' 类的元素
- 单击 div 添加/删除“选定”类
jQuery Code is here-
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>
回答by robm
I think the author was looking for:
我认为作者正在寻找：
$(this).not('.selected')
回答by Andrew
When you are checking if an element has or does not have a class, make sure you didn't accidentally put a dot in the class name:
当你检查一个元素是否有一个类时，确保你没有不小心在类名中放了一个点：
<div class="className"></div>
$('div').hasClass('className');
$('div').hasClass('.className'); #will not work!!!!
After a long time of staring at my code I realized I had done this. A little typo like this took me an hour to figure out what I had done wrong. Check your code!
在长时间盯着我的代码之后，我意识到我已经做到了。像这样的一个小错字花了我一个小时才弄清楚我做错了什么。检查您的代码！
回答by Jeff Adams
$(".thumbs").hover(
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("normal", 1.0);
}
},
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("slow", 0.3);
}
}
);
Putting an if inside of each part of the hover will allow you to change the select class dynamically and the hover will still work.
在悬停的每个部分内放置一个 if 将允许您动态更改选择类，并且悬停仍然有效。
$(".thumbs").click(function() {
$(".thumbs").each(function () {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).hover();
}
});
$(this).addClass("selected");
});
As an example I've also attached a click handler to switch the selected class to the clicked item. Then I fire the hover event on the previous item to make it fade out.
作为一个例子，我还附加了一个点击处理程序来将选定的类切换到被点击的项目。然后我在上一个项目上触发悬停事件以使其淡出。
回答by Tawani
You can also use the addClass and removeClass methods to toggle between items such as tabs.
您还可以使用 addClass 和 removeClass 方法在选项卡等项目之间切换。
e.g.
例如
if($(element).hasClass("selected"))
$(element).removeClass("selected");
回答by Juan
How about instead of using an if inside the event, you unbind the event when the select class is applied? I'm guessing you add the class inside your code somewhere, so unbinding the event there would look like this:
在应用 select 类时取消绑定事件，而不是在事件中使用 if 怎么样？我猜你在代码中的某个地方添加了类，所以取消绑定那里的事件看起来像这样：
$(element).addClass( 'selected' ).unbind( 'hover' );
The only downside is that if you ever remove the selected class from the element, you have to subscribe it to the hover event again.
唯一的缺点是，如果您从元素中删除了选定的类，则必须再次将其订阅到悬停事件。
