Onclick 변경 div 스타일 + onclick div 외부 스타일 변경 제거

div의 스타일을 onclick으로 변경하고 싶습니다 ... div의 바깥 쪽을 클릭 할 때 스타일을 제거하고 싶습니다.Onclick 변경 div 스타일 + onclick div 외부 스타일 변경 제거

다음 코드 설정이 있습니다 ... 누군가가 페이지의 다른 곳을 클릭하면 div의 스타일을 제거하도록 도와 줄 수 있습니까?

<head> 
    <style type="text/css"> 
    .account{ 
     width: 100px; 
     height: 100px; 
     border: 1px solid #000; 
    } 
    .selected{ 
    border: 2px solid #F00; 
    } 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".account").click(function(){ 
    $(".selected").removeClass("selected"); 
    $(this).addClass("selected"); 
    }); 
    }); 
    </script> 
</head> 
<body> 
<h1>the test</h1> 
<div class="account">test 1</div> 
<div class="account">test 2</div> 
</body>

도움 주셔서 감사합니다.

당신은 본문 요소의 예에 클릭 리스너를 부착하여이 동작을 달성 할 수

출처

2012-04-27 lbriquet

이보십시오.

$(document).ready(function(){ 
    $(".account").click(function(e){ 
     $(".selected").removeClass("selected"); 
     $(this).addClass("selected"); 
     e.stopPropagation();//This will stop the event bubbling 
    }); 

    //This event handler will take care of removing the class if you click anywhere else 
    $(document).click(function(){ 
     $(".selected").removeClass("selected"); 
    }); 
});

근무 데모 - 당신이 페이지에 많은이있는 경우 account 요소에 이벤트를 클릭하여 처리 할 수 on 또는 delegate을 사용할 수 있습니다 http://jsfiddle.net/yLhsC/

참고.

이와 비슷한 것. 당신이 실제 대상을 클릭하면 여전히 실행됩니다 delegate

$('parentElementContainingAllAccounts').delegate('.account', 'click', function(e){ 
    $(".selected").removeClass("selected"); 
    $(this).addClass("selected"); 
    e.stopPropagation();//This will stop the event bubbling 
});

출처

2012-04-27 14:44:29 ShankarSangoli

도움 주셔서 대단히 감사합니다! 이것은 완벽하게 작동했습니다! – lbriquet

Kool, 답변으로 표시하십시오. – ShankarSangoli

$("body").click(function(){ 

});

출처

2012-04-27 14:31:14 bacardnumberone

이 핸들러를 사용하여 jQuery를 1.7+

$('parentElementContainingAllAccounts').on('click', '.account', function(e){ $(".selected").removeClass("selected"); $(this).addClass("selected"); e.stopPropagation();//This will stop the event bubbling });

사용하는 경우 on를 사용

. – Joseph

예, 사실입니다 ... 죄송합니다. div click handler에서 false를 추가해야한다는 것을 잊어 버렸습니다. – bacardnumberone

는 IT를해야 다음,

$(document).on('click', function(e) { 
    if($(e.target).hasClass('account')) { 
     // do style change 
    } 
    else { 
     // undo style change 
    } 
});

그것은 전체 문서에 이벤트 핸들러를 결합하면 있도록 e.stopPropagation()을 호출하는 특정 요소에 대한 이벤트 처리기에 문제가 있습니다.

출처

2012-04-27 14:32:01

이 시도 :

$(document).ready(function() { 

$('.account').click(function(e) { 
    e.stopPropagation(); 
    $(this).addClass("selected"); 
}); 


$(document).click(function(){ 
    $('.selected').removeClass('selected'); 
}); 
});

출처

2012-04-27 14:44:06 AwesomeUserName

Onclick 변경 div 스타일 + onclick div 외부 스타일 변경 제거

답변

관련 문제