jquery - onclick div 应该删除类并添加类但是当点击其他 div 时第一个 div 类应该被删除

Question

onclick div 应该 removeclass 和 addclass 但是当单击其他 div 时，第一个 div 类应该被删除并将类添加到第二个 div。假设我有基于 jquery 的画廊。当点击它的缩略图时，缩略图应该像它被选中一样。当我单击另一个缩略图时，它应该选择第二个缩略图并使用 .css() 取消选择第一个缩略图。

这是我正在使用的缩略图html结构..

<div class="team-pic">
    <div class="pic-corner"> </div>
    <!-- end pic-corner -->
    <a class="showSingle" target="1"><img src="images/pic-1.jpg" alt=" "></a>
</div>

他们有很多 div 有 class="team-pic"。使用相同的html结构。我怎么能用jquery做到这一点

Answer 1

你可以试试这个：

<div class="team-pic">
     <a class="showSingle" target="1">
         <img src="http://www.placehold.it/50x50&text=1" alt=" " />
     </a>
     <a class="showSingle" target="2">
         <img src="http://www.placehold.it/50x50&text=2" alt=" " />
     </a>
     <a class="showSingle" target="3">
         <img src="http://www.placehold.it/50x50&text=3" alt=" " />
     </a>
     <a class="showSingle" target="4">
         <img src="http://www.placehold.it/50x50&text=4" alt=" " />
     </a>
</div>

CSS：

.selected{

    border: 1px solid red;
}

JS：

$('.team-pic a').click(function(e){
    e.preventDefault();
    $('.selected').removeClass('selected');
    $(this).find('img').addClass('selected');
});

例子

Answer 2

你可以试试这个。

.selectable是您画廊中的所有 div。.selected是当前选中的 div。

$('.selectable').unbind('click').bind('click', function(){
         $('.selected').removeClass('selected');
         $(this).addClass('selected');
});