Onclick更改div樣式+ onclick外部div刪除樣式更改

我想通過onclick更改div上的樣式...並在單擊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"); 
    }); 
});

工作演示 - http://jsfiddle.net/yLhsC/

注意，您可以使用on或delegate處理點擊account元素的事件，如果有許多頁面上。

就是這樣。

使用on如果使用jQuery 1.7+

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

使用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 2012-05-03 13:34:35

庫爾，標記爲答案。 – ShankarSangoli 2012-05-03 20:23:38

您可以在主體元素如安裝點擊收聽實現這一行爲：

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

});

來源

2012-04-27 14:31:14 bacardnumberone

這個處理程序，當你點擊的實際目標仍會觸發。 – Joseph 2012-04-27 14:32:37

是的，這是真的......對不起，忘了提到你將不得不添加div單擊處理程序返回false; – bacardnumberone 2012-04-27 14:42:42

下應該這樣做：

$(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刪除樣式更改

回答

相關問題