jQuery se o DIV não tiver classe "x"

211

No jQuery, preciso fazer uma instrução if para ver se $ this não contém a classe '.selected'.

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

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

});

Basicamente, quando esta função é executada (em foco), não quero executar o desbotamento se a classe '.selected' tiver sido anexada à div, isso significa que a imagem estará em total opacidade para indicar que está selecionada. Pesquisado no Google sem sorte, mesmo que seja uma pergunta simples de como usar uma instrução SE ...

jquery zuk1
fonte

Respostas:

359

Use o seletor " não ".

Por exemplo, em vez de:

$(".thumbs").hover()

experimentar:

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

alphadogg
fonte
pensando nisso, se o OP é adicionar a classe à div em algum momento após document.ready então eu não acho que sua sintaxe irá trabalhar
Russ Cam
@ zuk1: Bem, no seu snippet, você pega todos os elementos com a classe 'thumb' e faz um hover () em cada um. Você está dizendo que deseja passar o mouse sobre um elemento? O que é esse elemento? Estou confuso.
31910 alphadogg
@Russ: Correto. Se você usar o acima, serão necessários todos os elementos atualmente no DOM no momento em que são executados; para aqueles com a classe 'polegar' e não 'selecionado', será exibido o cursor do mouse ().
31910 alphadogg
Se você precisar fazer isso fora do seletor por algum motivo, poderá usá .not( ".selected" )-lo e funcionará da mesma maneira. Coisas brilhantes.
Joshua Pinter
180

jQuery possui a função hasClass () que retorna true se algum elemento do conjunto agrupado contiver a classe especificada

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

Dê uma olhada no meu exemplo de uso

  • Se você passar o mouse sobre uma div, a velocidade normal será reduzida a 100% de opacidade se a div não contiver a classe 'selecionada'
  • Se você passar o mouse de uma div, ela desaparecerá em velocidade lenta até 30% de opacidade se a div não contiver a classe 'selecionada'
  • Clicar no botão adiciona a classe 'selecionada' à div vermelha. Os efeitos de desbotamento não funcionam mais na div vermelha

Aqui está o código para ele

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

EDITAR:

isso é apenas um palpite, mas você está tentando alcançar algo assim ?

  • Ambas as divs começam com 30% de opacidade
  • Passar o mouse sobre uma div diminui para 100% de opacidade, passando o mouse diminui de volta para 30% de opacidade. Os efeitos de atenuação funcionam apenas em elementos que não têm a classe 'selecionada'
  • Clicar em uma div adiciona / remove a classe 'selecionada'

O código jQuery está aqui-

$(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>
Russ Cam
fonte
não funciona por algum motivo :( $ (". thumbs"). hover (function () {if (! ($ (this) .hasClass (". selected")) {$ (this) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("slow", 0.3);}}); e quebra meu código inteiro, nenhum dos JS trabalha com adicionado
zuk1 6/02/09
hasClass requer o.? hasClass ( 'selecionado') em vez de hasClass ( 'seleccionado.')
bendewey
O exemplo de Russ pode funcionar se você usar "selected" em vez de ".selected"?
Alphadogg 06/02/09
desculpas, não quis colocar o. lá. Atualizado agora
Russ Cam
Eu adicionei alguns exemplos para a minha resposta, para mostrar o funcionamento do código
Russ Cam
28

Eu acho que o autor estava procurando:

$(this).not('.selected')
robm
fonte
1
Não esperava que isso funcionasse. Até funciona como $ (". Class1"). Not (". Class2"), que é exatamente o que eu estava procurando! Obrigado!
kravits88
3
Funciona, mas vale a pena notar que isso não funciona como um booleano, pois retorna uma matriz. Matrizes vazias são "verdadeiras" em Javascript. Você poderia usar $(this).not('.selected').lengthcomo um booleano se realmente quisesse, mas isso é um pouco detalhado.
Joe Maffei
5

Ao verificar se um elemento tem ou não uma classe, verifique se você não colocou acidentalmente um ponto no nome da classe:

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

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

Depois de muito tempo olhando meu código, percebi que tinha feito isso. Um pequeno erro de digitação me levou uma hora para descobrir o que eu havia feito de errado. Verifique seu código!

Andrew
fonte
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); 
        }           
    }
);

Colocar um if dentro de cada parte do hover permitirá que você altere a classe de seleção dinamicamente e o hover ainda funcionará.

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

Como exemplo, também anexei um manipulador de cliques para alternar a classe selecionada para o item clicado. Em seguida, aciono o evento pairar no item anterior para que ele desapareça.

Jeff Adams
fonte
0

Você também pode usar os métodos addClass e removeClass para alternar entre itens, como guias.

por exemplo

if($(element).hasClass("selected"))
   $(element).removeClass("selected");
Tawani
fonte
por que não usar toggleClass ()?
Russ Cam
1
Porque o elemento pode ter outras classes.
Tawani 11/02/09
0

Que tal, em vez de usar um if dentro do evento, você desassocia o evento quando a classe select é aplicada? Suponho que você adicione a classe dentro do seu código em algum lugar, portanto, desvinculando o evento, ficaria assim:

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

A única desvantagem é que, se você remover a classe selecionada do elemento, precisará inscrevê-la no evento hover novamente.

Juan
fonte