单击时 - 给除当前项目之外的所有其他 li 项目一个 class - 网格

Question

如您所见，我有这个网格：

我想做的只是点击其中一个列表，图像应该保持不变，但所有其他图像应该有一些黑色不透明覆盖（与悬停效果相同）。

为此，我想当我点击一个列表项时，我需要给除当前列表项之外的所有列表项一个 class。如果我点击另一个，将其删除到新的并将其添加到前一个。

这是当前路径吗？

到目前为止，我已经添加了这个 jquery，它向所有 div 添加了一个 class，包括当前的，所以这不是很好。 .我的叠加层没有出现，而是留在图像后面（这是背景图像）

<script>


    $('ul.thumbs li').on('click', function(){

   $('ul.thumbs li').not(this).addClass('editable');

   });
</script>

任何使这项工作可行的想法。 .太棒了！

谢谢大家！

Answer 1

根据我的说法，黑色不透明度叠加层来自描述范围，因此不要添加可编辑的 class 将描述范围不透明度设置为 1，如下所示

$('ul.thumbs li').on('click', function(){
   $('ul.thumbs li').find('.description').css('opacity',0);
   $('ul.thumbs li').not(this).find('.description').css('opacity',1);

});

Answer 2

我知道之前有人回答过这个问题，但这里是引导网格的例子：

https://jsfiddle.net/herculez/157kwx3t/

$(function() {
  $('.panel').click(function() { // when a .panel is clicked
    $('.panel').not(this).removeClass('active')
    $(this).toggleClass('active')
  })
})

单击时 - 给除当前项目之外的所有其他 li 项目一个 class - 网格

on click - give a class to all the other li item except current one - grid

jquery

grid

click

overlay

addclass