javascript - 在选定的特定图像上添加叠加层（不超过 3 个）

Question

我有一张卡片网格，现在单击其中一张卡片会为所有卡片添加叠加层。

我需要：

1.- 如果用户点击一张卡片，只有那张卡片得到覆盖。
2.- 一次不超过 3 张卡片可以叠加。用户必须单击已单击的卡片之一以取消选择它，才能选择另一张卡片。

代码笔：

https://codepen.io/ogonzales/pen/yLJGzYr

JS代码：

$('.imageDiv').click(function(){
    $('img').toggleClass("tricky_image");
    $(".text").toggleClass("display-inline");
});

预期结果：

标签： javascriptcss

Answer 1

试试这个。使用this以便保留相关范围。

$('.imageDiv').click(function(){
    $(this).find('img').toggleClass("tricky_image");
    /*$(".text").css("display", "inline");*/
    $(this).find(".text").toggleClass("display-inline");
});

您可以同样（也许）使用该.children()方法（而不是.find()），但我不知道您的 dom 结构在每个“imageDiv”中的具体情况。