javascript - 在 Foreach 中显示和隐藏

Question

我有一个 foreach 循环遍历我的帖子，每个循环都会生成一个 html 卡，其中包含每个帖子的信息。

我只想在一张卡上显示和隐藏卡内的项目，而不是在每一张已加载的卡上。但我需要一些东西来区分各个卡片，这样 JavaScript 就不会隐藏所有卡片上的所有信息。

我想知道是否有人知道如何使用 JavaScript 函数来实现此目的，以仅搜索该元素内的元素而不搜索整个页面。

我当前的显示隐藏方法

function show_hide_button_one() {
    var a = document.getElementById("grid-item-1");
    var b = document.getElementById("grid-item-2");
    a.style.display = "block";
    b.style.display = "none";
    }
}
function show_hide_button_two() {
    var x = document.getElementById("grid-item-1");
    var y = document.getElementById("grid-item-2");
    y.style.display = "block";
    x.style.display = "none";
    }
}

但使用该方法，它会显示和隐藏相关类的所有内容而不仅仅是针对正在使用的卡。

它适用于很多帖子。所以我需要一条比我自己的方法更智能的路线 xD

请帮忙。

Answer 1

您有几个不同的选择。您可以使用 HTML 数据属性为每张卡提供唯一的标识符，而不仅仅是 ID 或类名称，或者您可以根据帖子信息使每张卡的 ID 唯一。 (注意不要给多张卡提供相同的 ID，因为这会弄乱您的代码!)

这是一篇关于 HTML 数据属性的好文章: https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/

PS - 另外，也可以这样做:

function show_hide_button(c1, c2) {
    var a = document.getElementById(c1);
    var b = document.getElementById(c2);
    a.style.display = a.style.display === "block" ? "none" : "block";
    b.style.display = b.style.display === "block" ? "none" : "block";
    }
}