函數使用jquery刪除選定項目的類

Question

看看這段代碼，看看你們是否可以幫助我。

HTML

<div class="images_list"> 
    <ul> 
    <li class="border" title="content_1"><img src="http://localhost/FreeDownload/admin/upload/923411_481490901920862_1216973581_n.jpg" width="150" /><span></span></li> 
    <li class="border" title="content_2"><img src="http://localhost/FreeDownload/admin/upload/923411_481490901920862_1216973581_n.jpg" width="150" /><span></span></li> 
    </ul> 
</div> 

CSS

.images_list li { 
    list-style: none; 
    float: left; 
    width: 150px; 
    height: 150px; 
    margin-right: 10px; 
} 
.images_list li span { 
    display: none; 
    position: absolute; 
    top: -10px; 
    left: 128px; 
    width: 32px; 
    height: 32px; 
    background: url(../upload/check.png); 
} 
.images_list li span:hover { 
    background: url(../upload/uncheck.png); 
} 
.images_list li.border { 
    border: 6px solid #D8D8D8; 
} 
.images_list li.selected { 
    border: 6px solid #4F8FDF; 
    position: relative; 
} 
.images_list li.selected span { 
    display: block; 
} 
.img_info { 
    margin-top: 170px; 
} 
.hidden { 
    display: none; 
} 

的Javascript

$('.images_list li').click(function() { 
    $('.images_list .selected').removeClass('selected'); 
    $(this).addClass('selected'); 
    var clicked = $(this).attr('title'); 
    $("#"+clicked).removeClass("hidden").siblings().addClass("hidden"); 
}); 

當勾選懸停在圖標更改爲減號圖標刪除選定的狀態。我嘗試了我所知道的一切，但沒有成功。

這裏有一個Demo

Answer 1

當你點擊跨度，這裏單擊意志向上鼓泡並再次選擇元素。嘗試：

$('.images_list li span').click(function(e) { 
    e.stopPropagation(); 
    $(this).parent("li").removeClass('selected'); 
    alert("remove class .selected"); 
}); 

DEMO FIDDLE

Answer 2

當你點擊跨度，您可以用同樣的方法，在列表中點擊刪除的處理程序類：

$('.images_list .selected').removeClass('selected'); 

然而，點擊會再泡最多家長和再次選擇元素，除非你使用stopPropagation保持它冒泡：

$('.images_list li span').click(function(e) { 
    e.stopPropagation(); 
    $('.images_list .selected').removeClass('selected'); 
});