，去除背景颜色的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排除。