Javascript 在选定的特定图像上添加覆盖（不超过3个）

我有一个网格的卡，现在点击其中一张卡添加一个覆盖到所有的卡

我需要：

1.-如果用户单击一张卡，则只有该卡获得覆盖。
2.-一次最多可覆盖3张卡。用户必须单击其中一张已单击的卡片才能取消选择，以便选择另一张

Codepen:

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

JS代码：

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

预期结果：

---

试试这个。使用

此

，以便保留相关范围

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

---

您可以同样（可能）使用

.children（）

方法（与

.find（）

相反），但我不知道dom结构在每个“imageDiv”中的具体位置。

您指定的单击函数搜索每个“img”元素和带有.text类的每个节点

实际需要的是获取clicked.imageDiv的子img元素和.text 通过使用$（this）.find（…）限制查询范围，我们只搜索单击的.imageDiv的子元素

通过一些额外的逻辑，您的第二个需求也可以得到满足->

$('.imageDiv').click(function(){
    const trickyCount = $(".tricky_image").length;
    const img = $(this).find('img');
    const text = $(this).find(".text");
    if(trickyCount < 3 || img.hasClass("tricky_image")){
      img.toggleClass("tricky_image");
      text.toggleClass("display-inline");  
    }
});  

$（'.imageDiv'）。单击（函数（）{
常量trickyCount=$（“.tricky_image”）。长度；
常量img=$（this.find（'img'）；
常量文本=$（this.find（“.text”）；
if（trickyCount<3 | | | img.hasClass（“棘手的图像”））{
img.toggleClass（“棘手的图像”）；
toggleClass（“显示内联”）；
}
});  

一次只选择3张卡怎么样？