，去除背景顏色的onclick

Question

這是我的代碼是如何工作的：

1. 這是怎麼看起來像最初。

2. 單擊第一個縮略圖圖像（紅色框中顯示）後，藍色背景被激活。

3. 當單擊第二個縮略圖圖像（以紅色框顯示）時，藍色背景也被激活。

4. 我的問題是在這裏。當我點擊相同的圖像關閉擴展器時，藍色背景仍然顯示在那裏。 我想在擴展器關閉時將其刪除。

這是我的代碼的一部分，我的代碼太長。我只是拿了簡化的部分。我認爲我的jQuery有一些問題，但我不知道如何改變它，希望你們中的一些人能夠給我提供一些建議。謝謝！

$(document).ready(function() { 
 
\t $('.thumbnail').mouseenter(function(e) { 
 
\t \t $(this).children('span').children('span').removeClass('title'); 
 
\t \t $(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500); 
 
\t }).mouseleave(function(e) { 
 
\t \t $(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200); 
 
\t \t $(this).children('span').children('span').addClass('title'); //click and just remove title 
 
\t }); 
 

 
\t $(".thumbnail").click(function(){ 
 
\t \t $(".thumbnail").children('span').children('span').removeClass("background-active"); 
 
\t \t $(this).children('span').children('span').toggleClass('background-active');  \t 
 
\t }); 
 
});

.gallery-item { 
 
    text-align: left; 
 
    font-size: 25px; 
 
    margin: 0 10px; 
 
    padding: 10px 0; 
 
} 
 

 
.gallery-item .thumbnail img { 
 
    display: block; 
 
    width: 50%; 
 
    height: auto; 
 
} 
 

 
.gallery-contents { position: relative; } 
 

 
.gallery-item .title { 
 
\t position:absolute; 
 
\t bottom:0px; 
 
\t left:0px; 
 
\t width:50%; 
 
\t background-color:#5ba4ee; 
 
\t color:#fff; 
 
\t font-size: 16px; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t padding: 5px 10px; 
 
} 
 

 

 
.dark-background, .background-active { 
 
\t background-color: rgba(112, 158, 202, 0.8); 
 
\t color: #fff; 
 
\t font-size: 16px; 
 
\t font-weight: bold; 
 
\t height: 50%; 
 
\t padding-top: 30%; 
 
\t position: absolute; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t width: 50%; 
 
\t z-index: 100; 
 
\t text-transform: uppercase; 
 
} 
 

 
.background-active.title { 
 
\t background-color: rgba(112, 158, 202, 0.8); 
 
\t padding-top: 30%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gallery-item"> 
 
    <div class="gallery-contents"> 
 
    <div class="thumbnail gallery-trigger"> 
 
     <span> 
 
     <span class="title">Gallery Item</span> 
 
     <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" /> 
 
     </span> 
 
    </div> 
 
    </div> 
 
    <div class="gallery-contents"> 
 
    <div class="thumbnail gallery-trigger"> 
 
     <span> 
 
     <span class="title">Gallery Item</span> 
 
     <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" /> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

試試這個..

$(document).ready(function() { 
 
\t $('.thumbnail').mouseenter(function(e) { 
 
\t \t $(this).children('span').children('span').removeClass('title'); 
 
\t \t $(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500); 
 
\t }).mouseleave(function(e) { 
 
\t \t $(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200); 
 
\t \t $(this).children('span').children('span').addClass('title'); //click and just remove title 
 
\t }); 
 

 
\t $(".thumbnail").click(function(){ 
 
\t \t $(".thumbnail").not(this).children('span').children('span').removeClass("background-active"); 
 
\t \t $(this).children('span').children('span').toggleClass('background-active'); \t 
 
\t }); 
 
});

.gallery-item { 
 
    text-align: left; 
 
    font-size: 25px; 
 
    margin: 0 10px; 
 
    padding: 10px 0; 
 
} 
 

 
.gallery-item .thumbnail img { 
 
    display: block; 
 
    width: 50%; 
 
    height: auto; 
 
} 
 

 
.gallery-contents { position: relative; } 
 

 
.gallery-item .title { 
 
\t position:absolute; 
 
\t bottom:0px; 
 
\t left:0px; 
 
\t width:50%; 
 
\t background-color:#5ba4ee; 
 
\t color:#fff; 
 
\t font-size: 16px; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t padding: 5px 10px; 
 
} 
 

 

 
.dark-background, .background-active { 
 
\t background-color: rgba(112, 158, 202, 0.8); 
 
\t color: #fff; 
 
\t font-size: 16px; 
 
\t font-weight: bold; 
 
\t height: 50%; 
 
\t padding-top: 30%; 
 
\t position: absolute; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t width: 50%; 
 
\t z-index: 100; 
 
\t text-transform: uppercase; 
 
} 
 

 
.background-active.title { 
 
\t background-color: rgba(112, 158, 202, 0.8); 
 
\t padding-top: 30%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gallery-item"> 
 
    <div class="gallery-contents"> 
 
    <div class="thumbnail gallery-trigger"> 
 
     <span> 
 
     <span class="title">Gallery Item</span> 
 
     <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" /> 
 
     </span> 
 
    </div> 
 
    </div> 
 
    <div class="gallery-contents"> 
 
    <div class="thumbnail gallery-trigger"> 
 
     <span> 
 
     <span class="title">Gallery Item</span> 
 
     <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" /> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>

只需使用.not(this)從取出background-active排除。