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 li span').click(function(e) {
    e.stopPropagation();
    $(this).parent("li").removeClass('selected');
    alert("remove class .selected");
});

DEMO FIDDLE

于 2013-10-06T16:46:11.247 に答える