Javascript Onclick change div style+；onclick外部div移除样式更改_Javascript_Jquery_Onclick

Javascript Onclick change div style+；onclick外部div移除样式更改

javascript jquery

Javascript Onclick change div style+；onclick外部div移除样式更改,javascript,jquery,onclick,Javascript,Jquery,Onclick,我想用一个单键改变一个div的样式。。。并在单击div之外的某个位置时删除样式我有以下代码设置。。。如果您单击页面上的任何其他位置，有人可以帮我删除div上的样式吗 <head> <style type="text/css"> .account{ width: 100px; height: 100px; border: 1px solid #000; } .selected{ border:

我想用一个单键改变一个div的样式。。。并在单击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>


.帐户{
宽度：100px；
高度：100px；
边框：1px实心#000；
}
.选定{
边框：2px实心#F00；
}
$（文档）.ready（函数（）{
$（“.account”）。单击（函数（）{
$（“.selected”）.removeClass（“selected”）；
$（此）.addClass（“选定”）；
});   
});
测试
测试1
测试2

非常感谢你能给我的任何帮助

您可以通过在主体元素上附加click listener来实现此行为，例如：

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

});

您可以通过在主体元素上附加click listener来实现此行为，例如：

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

});

应采取以下措施：

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

它将事件处理程序绑定到整个文档，因此您在调用

e.stopPropagation（）

的更具体元素上的任何事件处理程序都会遇到问题。以下操作应该可以完成：

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

它将事件处理程序绑定到整个文档，因此您在调用

e.stopPropagation（）

的更具体元素上的任何事件处理程序都会遇到问题。请尝试以下操作：

$(document).ready(function() {

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


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

试试这个：

$(document).ready(function() {

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


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

试试这个

$(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");
   });
});

工作演示-

请注意，如果页面上有许多元素，则可以使用

上的或委托来处理帐户
元素上的单击事件
像这样的
如果使用jQuery 1.7，则在
上使用+
$('parentElementContainingAllAccounts').on('click', '.account', function(e){
     $(".selected").removeClass("selected");
     $(this).addClass("selected");
     e.stopPropagation();//This will stop the event bubbling 
});

使用委托

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

试试这个
$(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");
   });
});

工作演示-
请注意，如果页面上有许多元素，则可以使用上的或委托来处理帐户
元素上的单击事件
像这样的
如果使用jQuery 1.7，则在
上使用+
$('parentElementContainingAllAccounts').on('click', '.account', function(e){
     $(".selected").removeClass("selected");
     $(this).addClass("selected");
     e.stopPropagation();//This will stop the event bubbling 
});

使用委托

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

当您单击实际目标时，此处理程序仍将启动。是的，这是真的。。。抱歉，忘了提及您将不得不添加到div click handler return false中；当您单击实际目标时，此处理程序仍将启动。是的，这是真的。。。抱歉，忘了提及您将不得不添加到div click handler return false中；