jDIV에 클래스 "x"가 없는 경우 쿼리
jQuery에서 $this가 클래스 '.selected'를 포함하지 않는지 확인하려면 if 문을 수행해야 합니다.
$(".thumbs").hover(function(){
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);
});
기본적으로 이 기능이 실행될 때(호버 위에서) 클래스 '.selected'가 div에 추가된 경우 페이드를 수행하지 않습니다. 이는 이미지가 선택되었음을 나타내기 위해 최대 불투명도가 된다는 것을 의미합니다.IF 문을 사용하는 방법에 대한 간단한 질문임에도 불구하고 구글에서 검색했지만 운이 없었습니다.
"not" 선택기를 사용합니다.
예를 들어, 다음 대신:
$(".thumbs").hover()
시도:
$(".thumbs:not(.selected)").hover()
jQuery의 hasClass() 함수는 랩핑된 집합에 지정된 클래스가 포함된 요소가 있으면 true를 반환합니다.
if (!$(this).hasClass("selected")) {
//do stuff
}
- div 위에 마우스를 올려 놓으면 div에 '선택한' 클래스가 포함되지 않으면 정상 속도로 100% 불투명도로 희미해집니다.
- div를 벗어나면 div에 '선택한' 클래스가 포함되지 않으면 div가 느린 속도로 30% 불투명도로 희미해집니다.
- 버튼을 클릭하면 빨간색 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>
편집:
이것은 단지 추측일 뿐이지만, 당신은 이것과 같은 것을 성취하려고 노력하고 있습니까?
- 두 디브 모두 30% 불투명도에서 시작합니다.
- 디바이드 위를 맴돌면 100% 불투명도로 희미해지고, 30% 불투명도로 희미해집니다.페이드 효과는 '선택한' 클래스가 없는 요소에서만 작동합니다.
- 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>
저자는 다음을 찾고 있었던 것 같습니다.
$(this).not('.selected')
요소에 클래스가 있는지 여부를 확인할 때 실수로 클래스 이름에 점을 넣지 않았는지 확인합니다.
<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");
});
예를 들어 클릭 핸들러를 첨부하여 선택한 클래스를 클릭한 항목으로 전환했습니다.그런 다음 이전 항목에 대한 호버 이벤트를 실행하여 페이드아웃합니다.
addClass 및 removeClass 메서드를 사용하여 탭과 같은 항목을 전환할 수도 있습니다.
예.
if($(element).hasClass("selected"))
$(element).removeClass("selected");
이벤트 내부에서 if를 사용하는 대신 선택 클래스가 적용될 때 이벤트 바인딩을 해제하는 것은 어떻습니까?코드 안에 클래스를 추가하여 이벤트 바인딩을 해제하면 다음과 같습니다.
$(element).addClass( 'selected' ).unbind( 'hover' );
유일한 단점은 선택한 클래스를 요소에서 제거할 경우 호버 이벤트에 다시 등록해야 한다는 것입니다.
언급URL : https://stackoverflow.com/questions/520250/jquery-if-div-doesnt-have-class-x
'programing' 카테고리의 다른 글
| JQuery가 모든 Ajax 오류를 검색합니다. (0) | 2023.09.04 |
|---|---|
| 별도의 파일에 있는 db가 있는 mysqdump (0) | 2023.09.04 |
| 6 LEFT JOIN을 사용하는 Maria DB 쿼리가 매우 느림 (0) | 2023.09.04 |
| MySQL 쿼리 최적화를 실행하기 위한 대규모 샘플 데이터베이스는 어디서 얻을 수 있습니까? (0) | 2023.09.04 |
| PLS 오류 00363, Pl/SQL에서 텍스트 파일로 쓰는 방법 (0) | 2023.09.04 |