0

查看此代码，看看你们是否可以帮助我。

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");
});

当复选标记悬停时，图标变为减号图标以删除选定状态。我尝试了我所知道的一切，但没有成功。

这是一个演示

4

2 回答 2

0

单击跨度时，可以使用与列表单击处理程序中相同的方法来删除该类：

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

但是，单击会冒泡到父元素并再次选择元素，除非您使用stopPropagation它来阻止它冒泡：

$('.images_list li span').click(function(e) {
  e.stopPropagation();
  $('.images_list .selected').removeClass('selected');
});
于 2013-10-06T16:44:16.423 回答
0

当您单击跨度时，此处单击将冒泡到父级并再次选择元素。尝试：

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

DEMO FIDDLE

于 2013-10-06T16:46:11.247 回答