當檢測到點擊div時更改div的樣式

Question

我在Bootstrap中有8個div，當我用下面的代碼單擊它時，我可以更改div的樣式;

$(document).ready(function() { 
    $(".continue--btn").hide(); 

    if ($('.generator--templates').click(function(){ 
    $('.continue--btn').show(); 
    $(this).css("background", "#03A9F3"); 
    $(this).find('.generator--templates__description, .generator--templates__purpose').css("color", "#fff"); 
}) 
); 

這也顯示一個按鈕來繼續。

但是，我想要做的下一件事是當我點擊任何地方，但div，div得到他的默認樣式，並且按鈕將再次消失。

我無法圍繞此包裹我的頭。

我已經試過這樣：

var templates = document.getElementsByClassName('.generator--templates'); 

window.onclick = function(event){ 
    if (event.target == templates){ 
     templates.style.background = "#fff"; 
    } 
} 

Answer 1

首先注意你的語法是不正確的，你已經把一個click()處理器在if聲明。

其次，templates將是從getElementsByClassName返回的元素的集合。因此，將它與event.target中的元素進行比較永遠不會匹配。

要解決此問題將點擊處理程序上document和檢查類目標元素，像這樣：

$(document).ready(function() { 
    $('.generator--templates').click(function() { 
    $('.continue--btn').show(); 
    $(this).find('.generator--templates__description, .generator--templates__purpose').addBack().addClass('active'); 
    }) 

    $(document).on('click', function(e) { 
    var $target = $(this); 
    if ($target.is('.generator--templates') || $target.closest('.generator--templates').length) { 
     $('.continue--btn').hide(); 
     $('.generator--templates').removeClass('active'); 
    } 
    }); 
}); 

.continue--btn { 
    display: none; 
} 

.generator--templates.active, 
.generator--templates__description.active, 
.generator--templates__purpose.active { 
    color: #FFF; 
} 

注意使用CSS的位置，而不是css()這應該是儘可能避免，因爲它將JS邏輯與UI緊密聯繫在一起。

Answer 2

請試試這個：

$(".continue--btn").hide(); 
 
$('.generator--templates').click(function() { 
 
    // reset the sibling elements 
 
    $(this).siblings('.generator--templates').each(function(i, el) { 
 
    $(el).find('.continue--btn').hide(); 
 
    $(el).css('background', 'rgba(0, 0, 0, 0.2)'); 
 
    $(el).find('.generator--templates__description, .generator--templates__purpose').css("color", "transparent"); 
 
    }); 
 
    // apply changes to clicked item 
 
    $(this).find('.continue--btn').show(); 
 
    $(this).css("background", "#03A9F3"); 
 
    $(this).find('.generator--templates__description, .generator--templates__purpose').css("color", "#fff"); 
 
}); 
 
$('.body').click(function(e) { // change '.body' to 'body' for your code 
 
    var $target = jQuery(e.target); 
 
    if ($target.hasClass('generator--templates') || 
 
    $target.closest('.generator--templates').length > 0) { 
 
    // Clicked on a box 
 
    } else { // Clicked elsewhere 
 
    $('.generator--templates').each(function(i, el) { 
 
     $(el).find('.continue--btn').hide(); 
 
     $(el).css('background', 'rgba(0, 0, 0, 0.2)'); 
 
     $(el).find('.generator--templates__description, .generator--templates__purpose').css("color", "transparent"); 
 
    }); 
 
    } 
 
});

.body { 
 
    /* added just for display */ 
 
    background: rgba(0, 0, 0, 0.1); 
 
    width: 100%; 
 
    height: 500px 
 
} 
 

 
.generator--templates { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    margin-right: 10px; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="body"> 
 
    <div class="container-element"> 
 
    <div class="generator--templates one"> 
 
     <button class="continue--btn">Continue</button> 
 
    </div> 
 
    <div class="generator--templates two"> 
 
     <button class="continue--btn">Continue</button> 
 
    </div> 
 
    <div class="generator--templates three"> 
 
     <button class="continue--btn">Continue</button> 
 
    </div> 
 
    </div> 
 
</div>