當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不正確）

回答

相關問題