jQuery, если у DIV нет класса «x»

В jQuery мне нужно сделать оператор if, чтобы увидеть, содержит ли $ this класс '.selected'.

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

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

});

В основном, когда эта функция запущена (при наведении курсора), я не хочу выполнять замирания, если класс «.selected» был добавлен в div, это будет означать, что изображение будет в полной непрозрачности, чтобы обозначить, что оно выбрано. Поиск в Google не принес удачи, хотя это простой вопрос о том, как использовать оператор IF ...

Используйте селектор «не ».

Например, вместо:

$(".thumbs").hover()

пытаться:

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

jQuery имеет функцию hasClass (), которая возвращает true, если какой-либо элемент в упакованном наборе содержит указанный класс

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

Взгляните на мой пример использования

• Если вы наводите курсор мыши на элемент 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>

РЕДАКТИРОВАТЬ:

это всего лишь предположение, но вы пытаетесь достичь чего-то подобного ?

• Оба div начинаются с непрозрачности 30%
• При наведении курсора на делитель исчезает до 100% непрозрачности, при наведении курсора становится до 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>

Я думаю, что автор искал:

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

Когда вы проверяете, есть ли у элемента класс или нет, убедитесь, что вы случайно не поставили точку в имени класса:

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

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

После долгого изучения моего кода я понял, что сделал это. Такая опечатка заняла у меня час, чтобы понять, что я сделала неправильно. Проверьте свой код!

$(".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");                   
});

В качестве примера я также добавил обработчик кликов, чтобы переключить выбранный класс на выбранный элемент. Затем я запускаю событие наведения на предыдущий элемент, чтобы он исчез.

Вы также можете использовать методы addClass и removeClass для переключения между такими элементами, как вкладки.

например

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

Как насчет того, чтобы вместо использования if внутри события вы открепляете событие, когда применяется класс select? Я предполагаю, что вы добавляете класс в ваш код где-то, поэтому отмена привязки события будет выглядеть так:

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

Единственным недостатком является то, что если вы когда-либо удаляете выбранный класс из элемента, вы должны снова подписать его на событие hover.