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

所有卡的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>

// JS

function show_hide_button_one(id1,id2) {
    var a = document.getElementById(id1);
    var b = document.getElementById(id2);
    a.style.display = "block";
    b.style.display = "none";
    }
}
function show_hide_button_two(id1,id2) {
    var x = document.getElementById(id1);
    var y = document.getElementById(id2);
    y.style.display = "block";
    x.style.display = "none";
    }
}

//呼叫

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

Answer 2

您有两个不同的选择。您可以使用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";
    }
}

在Foreach中显示和隐藏

2 个答案: