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

211

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

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

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

});

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

jquery zuk1
источник

359

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

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

$(".thumbs").hover()

пытаться:

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

alphadogg
источник

если подумать, если OP добавляет класс в div в какой-то момент после документа. Уже тогда я не думаю, что ваш синтаксис сработает

Russ Cam

@ zuk1: Ну, из своего фрагмента вы берете все элементы с классом 'thumb' и делаете hover () для каждого. Вы говорите, что хотите просто навести курсор на один элемент? Что это за один элемент? Я смущен.

alphadogg

@Russ: Правильно. Если вы используете вышеизложенное, то все элементы, которые в настоящий момент находятся в DOM, будут выполняться во время его выполнения, а для элементов с классом «thumb», а не «selected», он будет делать hover ().

alphadogg

Если по какой-то причине вам нужно сделать это вне селектора, вы можете использовать .not( ".selected" )его, и он будет работать так же. Блестящий материал.

Джошуа Пинтер

180

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>

Русь Кэм
источник

по какой-то причине не работает :( $ (". thumbs"). hover (function () {if (! ($ (this) .hasClass (". selected")) {$ (this) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("slow", 0.3);}}), и это нарушает весь мой код, ни один из JS не работает с что добавлено

zuk1

hasClass требует.? hasClass ('выбранный') вместо hasClass ('. выбранный')

bendewey

Пример Русса может сработать, если вы используете "selected" вместо ".selected"?

alphadogg

извинения, не хотел ставить. там. Обновлено сейчас

Russ Cam

Я добавил несколько примеров в свой ответ, чтобы показать работающий код

Russ Cam

28

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

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

robm
источник

1

Не ожидал, что это сработает. Даже работает как $ (". Class1"). Not (". Class2"), что именно то, что я был после! Спасибо!

kravits88

3

Это работает, но стоит отметить, что это не работает как логическое значение, так как возвращает массив. Пустые массивы являются «правдивыми» в Javascript. Вы можете использовать $(this).not('.selected').lengthв качестве логического значения, если вы действительно хотите, но это немного многословно.

Джо Маффей

5

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

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

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

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

Андрей
источник

1

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

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

Джефф Адамс
источник

0

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

например

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

Tawani
источник

почему бы просто не использовать toggleClass ()?

Russ Cam

1

Потому что элемент может иметь другие классы.

Тавани

0

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

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

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

Juan
источник

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

Ответы: