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 .selected').removeClass('selected');

然而，点击将会冒泡到父级并再次选择该元素，除非您使用stopPropagation防止冒泡：

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

Answer 2

单击span时，此处单击将冒泡到父级并再次选择该元素。尝试：

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

的 DEMO FIDDLE

使用jquery删除所选项的类的函数

2 个答案: