[jquery] DIV에 클래스 “x”가없는 경우 jQuery

Program / 글쓴이

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

오랫동안 내 코드를 쳐다 본 후에 나는 이것을했음을 깨달았다. 이와 같은 작은 오타는 내가 잘못한 것을 알아내는 데 한 시간이 걸렸습니다. 코드를 확인하십시오!

답변

$(".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를 사용하는 대신 select 클래스가 적용될 때 이벤트를 바인딩 해제합니까? 코드 내부에 클래스를 추가 한 것으로 추측되므로 이벤트 바인딩을 해제하면 다음과 같습니다.

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

유일한 단점은 요소에서 선택한 클래스를 제거한 경우 호버 이벤트를 다시 구독해야한다는 것입니다.