jQuery tiene la función hasClass() º por lo devuelve verdadero si cualquier elemento en el conjunto envuelto contiene la clase especificada
if (!$(this).hasClass("selected")) {
//do stuff
}
Take a look at my example of use
- Si se pasa sobre un div, que se desvanece como velocidad normal al 100% de opacidad si el div hace no contiene el 'selected' clase
- Si pasa de un div, que se desvanece a baja velocidad al 30% de opacidad si el div no contiene el 'selected' clase
- Al hacer clic en el botón, se agrega la clase "seleccionada" al div rojo. El desvanecimiento efectos ya no funcionan en el div roja
Aquí está el código para ello
<!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:
esto es sólo una suposición, pero estás tratando de achieve something like this ?
- dos divs comienzan a partir de 30% de opacidad
- pasar por encima de un div se desvanece a 100% de opacidad, vuelo estacionario sin desvanece hasta el 30% de opacidad. Se desvanecen los efectos sólo funcionan en elementos que no tienen la 'selected' clase
- Al hacer clic en un div agrega/elimina la clase 'selected'
Código jQuery es aquí-
$(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>
pensar en ello, si el OP es la adición de la clase a la div en algún momento después document.ready entonces no creo que su sintaxis trabajará –
Además, hay varios div llamados .thumbs .... – zuk1
@ zuk1: Bueno, desde tu fragmento, tomas todos los elementos con la clase 'thumb' y haces un hover() sobre cada uno. ¿Estás diciendo que solo quieres flotar sobre un elemento? ¿Cuál es ese elemento? Estoy confundido. – alphadogg