当div没有被点击时删除类（onclick不正确）

我正在写一个小的JQuery/JS代码来在我的应用程序中创建一些交互。我正在使用一个div，如果点击它，它将会是一种不同的颜色。比如，如果我再次点击它（它检查div有提供颜色的类），它会弹出一个模式。但是，现在，我想删除颜色，如果我点击除div外的任何东西。所以，div是灰色的，当我点击它时它会变成黄色，而当我点击其他的东西时它必须再次变成灰色。我想是这样，如果格拿到了类"clicked"和点击不上格属实，这将删除类"clicked"我的代码：当div没有被点击时删除类（onclick不正确）

$(".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>

来源

2016-12-19 Gijsberts

添加相关的HTML代码，请。 –

完成，这是特定的div – Gijsberts

为了去除clicked类您需要附加文件上单击处理和检查e.target

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

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

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

来源

2016-12-19 12:33:38 anu

使用此代码来检查单击您想要的文档之外..

$(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

来源

2016-12-19 12:38:19

当div没有被点击时删除类（onclick不正确）

回答

相关问题