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...

Ответ 1

Используйте селектор not".

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

$(".thumbs").hover()

попробовать:

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

Ответ 2

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>

EDIT:

Это просто догадка, но пытаетесь ли вы добиться чего-то подобного?

Оба div начинаются с непрозрачности 30%
Наведение на div исчезает до 100% непрозрачности, зависание исчезает до 30% непрозрачности. Эффекты Fade работают только на элементах, которые не имеют класса "selected"
Щелчок по div добавляет/удаляет класс 'selected'

Код 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>

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 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); 
        }           
    }
);

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

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

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

Ответ 6

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

например.

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

Ответ 7

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

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

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