1

我想通过单击更改 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>

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

4

4 回答 4

6

以下应该做到这一点：

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

它将事件处理程序绑定到整个文档，因此在调用e.stopPropagation().

于 2012-04-27T14:32:01.447 回答
2

试试这个。

$(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-27T14:44:29.120 回答
0

您可以通过在 body 元素上附加点击侦听器来实现此行为，例如：

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

});
于 2012-04-27T14:31:14.480 回答
0

试试这个： 

$(document).ready(function() {

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


$(document).click(function(){  
    $('.selected').removeClass('selected');
});
});
于 2012-04-27T14:44:06.743 回答