jQuery If DIV Tidak Memiliki Kelas "x"

211

Di jQuery saya perlu melakukan pernyataan if untuk melihat apakah $ this tidak mengandung kelas '. Terpilih'.

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

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

});

Pada dasarnya ketika fungsi ini dijalankan (di hover) saya tidak ingin melakukan memudar jika kelas '. Dipilih' telah ditambahkan ke div, ini akan berarti bahwa gambar akan berada di opacity penuh untuk menandakan bahwa itu dipilih. Dicari di Google tidak berhasil meskipun pertanyaan sederhana tentang bagaimana menggunakan pernyataan IF ...

jquery zuk1
sumber

359

Gunakan pemilih " bukan ".

Misalnya, alih-alih:

$(".thumbs").hover()

mencoba:

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

alphadogg
sumber

berpikir tentang hal itu, jika OP menambahkan kelas ke div di beberapa titik setelah dokumen. Sudah maka saya tidak berpikir sintaks Anda akan bekerja

Russ Cam

@ zuk1: Ya, dari cuplikan Anda, Anda mengambil semua elemen dengan kelas 'ibu jari' dan melakukan hover () pada masing-masing. Apakah Anda mengatakan Anda hanya ingin melakukan hover pada satu elemen? Apa satu elemen itu? Saya bingung.

alphadogg

@Russ: Benar. Jika Anda menggunakan hal di atas, maka akan mengambil semua elems saat ini di DOM pada saat dieksekusi, dan untuk mereka yang memiliki kelas 'ibu jari' dan tidak 'dipilih' akan melakukan hover ().

alphadogg

Jika Anda perlu melakukan ini di luar pemilih untuk beberapa alasan, Anda dapat menggunakan .not( ".selected" )dan itu akan bekerja sama. Hal yang brilian.

Joshua Pinter

180

jQuery memiliki fungsi hasClass () yang mengembalikan true jika ada elemen dalam set yang dibungkus berisi kelas yang ditentukan

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

Lihatlah contoh penggunaan saya

Jika Anda mengarahkan kursor ke div, kecepatannya memudar seperti normal menjadi 100% opacity jika div tidak mengandung kelas 'terpilih'
Jika Anda melayang keluar dari div, itu memudar dengan kecepatan lambat hingga 30% opacity jika div tidak mengandung kelas 'terpilih'
Mengklik tombol menambahkan kelas 'terpilih' ke div merah. Efek memudar tidak lagi berfungsi pada red div

Ini kode untuk itu

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

ini hanya tebakan, tetapi apakah Anda mencoba untuk mencapai sesuatu seperti ini ?

Kedua div mulai pada opacity 30%
Melayang di atas div memudar menjadi opacity 100%, melayang memudar kembali ke opacity 30%. Efek pudar hanya bekerja pada elemen yang tidak memiliki kelas 'terpilih'
Mengklik div menambah / menghapus kelas 'terpilih'

Kode jQuery ada di sini-

$(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
sumber

tidak berfungsi karena beberapa alasan :( $ (". thumbs"). hover (function () {if (! ($ (ini) .hasClass (". terpilih")) {$ (ini) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("slow", 0.3);}}), dan itu memecah seluruh kode saya, tidak ada JS yang bekerja dengan yang ditambahkan

zuk1

apakah hasClass membutuhkan.? hasClass ('terpilih') bukannya hasClass ('. terpilih')

bendewey

Contoh Russ dapat berfungsi jika Anda menggunakan "terpilih" dan bukan ". Terpilih"?

alphadogg

permintaan maaf, tidak bermaksud untuk menempatkan. di sana. Diperbarui sekarang

Russ Cam

Saya telah menambahkan beberapa contoh untuk jawaban saya, untuk menunjukkan kode berfungsi

Russ Cam

28

Saya pikir penulis sedang mencari:

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

robm
sumber

1

Tidak mengharapkan ini bekerja. Bahkan berfungsi seperti $ (". Class1"). Not (". Class2") yang persis seperti yang saya kejar! Terima kasih!

kravits88

3

Ini berfungsi, tetapi perlu dicatat bahwa ini tidak berfungsi sebagai boolean, karena mengembalikan array. Array kosong "benar" dalam Javascript. Anda dapat menggunakan $(this).not('.selected').lengthsebagai boolean jika Anda benar-benar ingin, tetapi itu sedikit bertele-tele.

Joe Maffei

5

Saat Anda memeriksa apakah suatu elemen memiliki atau tidak memiliki kelas, pastikan Anda tidak secara tidak sengaja memasukkan titik pada nama kelas:

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

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

Setelah lama menatap kode saya, saya menyadari saya telah melakukan ini. Kesalahan kecil seperti ini membutuhkan waktu satu jam untuk mencari tahu apa yang telah saya lakukan salah. Periksa kode Anda!

Andrew
sumber

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

Menempatkan if di dalam setiap bagian hover akan memungkinkan Anda untuk mengubah kelas pilih secara dinamis dan hover akan tetap berfungsi.

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

Sebagai contoh, saya juga melampirkan pengendali klik untuk mengalihkan kelas yang dipilih ke item yang diklik. Lalu aku memunculkan event hover pada item sebelumnya untuk membuatnya menghilang.

Jeff Adams
sumber

0

Anda juga dapat menggunakan metode addClass dan removeClass untuk beralih di antara item seperti tab.

misalnya

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

Tawani
sumber

mengapa tidak menggunakan toggleClass () saja?

Russ Cam

1

Karena elemen mungkin memiliki kelas lain.

Tawani

0

Bagaimana kalau alih-alih menggunakan if dalam acara, Anda membatalkan ikatan peristiwa ketika kelas pilih diterapkan? Saya kira Anda menambahkan kelas di dalam kode Anda di suatu tempat, jadi melepas ikatan acara akan terlihat seperti ini:

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

Satu-satunya downside adalah bahwa jika Anda pernah menghapus kelas yang dipilih dari elemen, Anda harus berlangganan ke acara hover lagi.

Juan
sumber

jQuery If DIV Tidak Memiliki Kelas "x"

Jawaban: