Javascript 藏在一间屋子里

我有一个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更智能的路由

---

请帮助。

所有卡的id必须相同。每个卡/按钮都有单独的id（无论你想隐藏什么）。你会实现你的愿望

试着这样做

//HTML

<div id="card1>
...
<button id="card1id1"></button>
<button id="card1id2"></button>
</div>

<div id="card2>
...
<button id="card2id1"></button>
<button id="card2id2"></button>
</div>

//召唤

show_hide_button_one("card1id1", "card1id1")
show_hide_button_two("card1id1", "card1id1")

---

你有几个不同的选择。您可以使用HTML数据属性为每张卡提供唯一的标识符，而不仅仅是ID或类名，也可以根据帖子信息使每张卡的ID唯一。（小心不要给多张卡提供相同的ID，因为这会弄乱您的代码！）

下面是一篇关于HTML数据属性的好文章：

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";
    }
}

---

您可以使用关键字

this

获取元素的实例。也可以使用

class

选择器，而不是

id

。如果你能和我分享一把工作小提琴，也许我可以帮你。但是有数百个postshow你在渲染帖子吗？我需要通过HavaScription获得唯一的I'd并获得那些唯一的I'd。我正在使用php获取它们，可能你可以从服务器获得。。。或者只是迭代器计数？顺便说一下-如果您向我们展示forEach循环和用于生成卡片的代码，我也可以给您提供更全面的响应。

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";
    }
}