DIV에 클래스 "x"가없는 경우 jQuery
jQuery에서 $ this에 클래스 '.selected'가 포함되어 있지 않은지 확인하려면 if 문을 수행해야합니다.
$(".thumbs").hover(function(){
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.3);
});
기본적 으로이 기능이 실행될 때 (호버에서) 클래스 '.selected'가 div에 추가 된 경우 페이드를 수행하고 싶지 않습니다. 이것은 이미지가 선택되었음을 나타내는 전체 불투명 상태에 있음을 의미합니다. IF 문을 사용하는 방법에 대한 간단한 질문이지만 불행히도 Google에서 검색했습니다 ...
"not "선택기를 사용하십시오 .
예를 들어,
$(".thumbs").hover()
시험:
$(".thumbs:not(.selected)").hover()
jQuery는 hasClass () 함수를 가지고 있으며, 이는 랩핑 된 세트의 요소가 지정된 클래스를 포함하는 경우 true를 리턴합니다.
if (!$(this).hasClass("selected")) {
//do stuff
}
- div 위에 마우스를 올리면 div에 'selected'클래스가 포함되어 있지 않으면 일반 속도로 100 % 불투명도로 사라집니다.
- div 밖으로 마우스를 가져 가면 div에 'selected'클래스가 포함되어 있지 않으면 느린 속도로 30 % 불투명도로 사라집니다
- 버튼을 클릭하면 '선택'클래스가 빨간색 div에 추가됩니다. 페이딩 효과가 더 이상 빨간색 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>
편집하다:
이것은 단지 추측이지만, 당신은 이와 같은 것을 달성 하려고 노력하고 있습니까?
- 두 div 모두 30 % 불투명도로 시작
- div 위로 마우스를 가져 가면 불투명도가 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!!!!
After a long time of staring at my code I realized I had done this. A little typo like this took me an hour to figure out what I had done wrong. Check your code!
$(".thumbs").hover(
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("normal", 1.0);
}
},
function(){
if (!$(this).hasClass("selected")) {
$(this).stop().fadeTo("slow", 0.3);
}
}
);
Putting an if inside of each part of the hover will allow you to change the select class dynamically and the hover will still work.
$(".thumbs").click(function() {
$(".thumbs").each(function () {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).hover();
}
});
$(this).addClass("selected");
});
As an example I've also attached a click handler to switch the selected class to the clicked item. Then I fire the hover event on the previous item to make it fade out.
You can also use the addClass and removeClass methods to toggle between items such as tabs.
e.g.
if($(element).hasClass("selected"))
$(element).removeClass("selected");
How about instead of using an if inside the event, you unbind the event when the select class is applied? I'm guessing you add the class inside your code somewhere, so unbinding the event there would look like this:
$(element).addClass( 'selected' ).unbind( 'hover' );
The only downside is that if you ever remove the selected class from the element, you have to subscribe it to the hover event again.
참고URL : https://stackoverflow.com/questions/520250/jquery-if-div-doesnt-have-class-x
'Programing' 카테고리의 다른 글
| Mac OS X 터미널 : 맵 옵션 + 삭제를 "뒤로 삭제 단어"로 (0) | 2020.05.01 |
|---|---|
| 인수를 전달하고 파일에서 stdin을 gdb에서 실행되는 프로그램으로 리디렉션하는 방법은 무엇입니까? (0) | 2020.05.01 |
| jQuery에서 텍스트 영역의 변경 이벤트에 어떻게 바인딩 할 수 있습니까? (0) | 2020.05.01 |
| 자바 스크립트에서 NaN을 0으로 변환 (0) | 2020.05.01 |
| ActiveRecord 객체가 New인지 확인 (0) | 2020.05.01 |