Question

我正在编写一个小的JQuery / JS代码来在我的应用程序中创建一些交互。如果我点击它，我正在使用一个不同颜色的div。然后，如果我再次点击它（它检查div有提供颜色的类），它会弹出一个模态。但是，现在，如果我点击除div之外的任何东西，我想删除颜色。所以，div是灰色的，当我点击它时它会变成黄色，而不是在我点击其他东西后它必须再次变灰。我觉得如果div得到了类"clicked"并且div上的点击不正确，它将删除类"clicked"我的代码：

$(".progressDefault").click(function(){
  if ($( ".progressDefault" ).hasClass( "clicked" )) {
    $('#myModal').modal('show');
  }
  if ($ (".progressDefault").hasClass("clicked") && $(".progressDefault").onclick == false ) {
    $('.progressDefault').removeClass('clicked');
  }
  $(this).toggleClass('clicked');
});

HTML Div

<div class="progress-bar progressDefault" role="progressbar" aria-valuenow="25"` aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
  <span class="sr-only">25%</span>
</div>

Answer 1

要删除clicked类，您需要在文档上附加点击处理程序并检查e.target

＆＃13;

$(".progressDefault").click(function(){
    if ($(this).hasClass( "clicked" )) {
       alert('show modal');
    }else{
      $(this).addClass('clicked');
    }
  });
$(document).click(function(e){
  if(!$('.progressDefault').is(e.target) && $('.progressDefault').has(e.target).length === 0){// if div is not target nor its descendant
    $('.progressDefault').removeClass('clicked');
  }
});

＆＃13;

.progressDefault{
  border:1px solid black;
  width:50px;
  height:50px;
  padding:10px;
  background:grey;
}
.clicked{
  background:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='progressDefault'>test</div>

＆＃13;

Answer 2

使用此代码检查所需文档的外部点击..

$(document).mouseup(function (e) {
    var container = $(".progressDefault");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
    /* if the target of the click isn't the container && nor a descendant of the container */
        $('.progressDefault').removeClass('clicked');
    }
});

DEMO

未单击div时删除类（onclick not true）

2 个答案: