ใน jQuery ฉันต้องทำคำสั่ง if เพื่อดูว่า $ นี่ไม่มีคลาส '.selected' หรือไม่
$(".thumbs").hover(function(){
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);
});โดยทั่วไปเมื่อฟังก์ชั่นนี้ทำงาน (เมื่อเลื่อนเมาส์ไปด้านบน) ฉันไม่ต้องการให้จางหายไปถ้าคลาส '.selected' ถูกผนวกเข้ากับ div นี่จะหมายความว่าภาพจะมีความทึบเต็มที่เพื่อแสดงว่ามันถูกเลือก ค้นหาใน Google โดยไม่มีโชคแม้ว่าจะเป็นคำถามง่ายๆเกี่ยวกับวิธีใช้คำสั่ง IF ...
คำตอบ:
ใช้ตัวเลือก " ไม่ "
ตัวอย่างเช่นแทนที่จะเป็น:
$(".thumbs").hover()
ลอง:
$(".thumbs:not(.selected)").hover()
.not( ".selected" )และมันจะทำงานเหมือนเดิม สิ่งที่ยอดเยี่ยม
jQuery มีฟังก์ชั่น hasClass () ที่ส่งกลับจริงถ้าองค์ประกอบใด ๆ ในชุดห่อมีชั้นที่ระบุ
if (!$(this).hasClass("selected")) {
//do stuff
}นี่คือรหัสสำหรับมัน
<!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>แก้ไข:
นี่เป็นเพียงการคาดเดา แต่คุณพยายามทำสิ่งนี้ให้สำเร็จหรือไม่?
รหัส 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>ฉันคิดว่าผู้เขียนกำลังมองหา:
$(this).not('.selected')$(this).not('.selected').lengthเป็นบูลีนได้หากคุณต้องการจริงๆ แต่นั่นเป็นเพียง verbose เล็กน้อย
เมื่อคุณกำลังตรวจสอบว่าองค์ประกอบมีหรือไม่มีคลาสตรวจสอบให้แน่ใจว่าคุณไม่ได้ใส่จุดในชื่อคลาสโดยไม่ตั้งใจ:
<div class="className"></div>
$('div').hasClass('className');
$('div').hasClass('.className'); #will not work!!!!หลังจากจ้องมองที่รหัสของฉันเป็นเวลานานฉันก็ตระหนักว่าฉันได้ทำสิ่งนี้แล้ว พิมพ์ผิดเล็ก ๆ น้อย ๆ เช่นนี้ใช้เวลาหนึ่งชั่วโมงในการคิดว่าฉันทำอะไรผิด ตรวจสอบรหัสของคุณ!
$(".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");
});ตัวอย่างเช่นฉันได้แนบตัวจัดการคลิกเพื่อสลับคลาสที่เลือกไปยังรายการที่คลิก จากนั้นฉันก็ยิงเหตุการณ์โฮเวอร์ในรายการก่อนหน้าเพื่อทำให้มันหายไป
วิธีการแทนการใช้ถ้าภายในเหตุการณ์คุณเลิกผูกเหตุการณ์เมื่อมีการเลือกคลาสที่ใช้หรือไม่ ฉันคาดเดาว่าคุณจะเพิ่มคลาสภายในโค้ดของคุณที่ใดที่หนึ่งดังนั้นการยกเลิกการโยงเหตุการณ์ที่เกิดขึ้นจะมีลักษณะดังนี้:
$(element).addClass( 'selected' ).unbind( 'hover' );ข้อเสียเพียงอย่างเดียวคือถ้าคุณลบคลาสที่เลือกออกจากองค์ประกอบคุณจะต้องสมัครสมาชิกกับเหตุการณ์โฮเวอร์อีกครั้ง