jQuery运行时显示隐藏的DIV（并隐藏另一个DIV）[duplicate]-解网

问：

这个问题在这里已经有答案了：

使用 JavaScript 显示/隐藏“div” （15 个答案）

10个月前关闭。

我创建了一个脚本，如果 DIV 类包含文本“未找到事件”或“错误”，则该脚本会隐藏该脚本。这部分工作得很好，但是当这种情况发生时，我希望将隐藏的 DIV ID 加载到它的位置。（#brxe-AKQMJS）

<script>
const divs = document.getElementsByClassName('etn-not-found-post');

for (let x = 0; x < divs.length; x++) {
    const div = divs[x];
    const content = div.textContent.trim();
  
    if (content == 'No Event Found' || content == 'Error') {
        div.style.display = 'none';
    }
}
</script>

如何正确加载？我要显示的 DIV 设置为 display：none。

提前非常感谢。

我尝试添加 if 语句，但这只会导致原始代码中断。

JavaScript jQuery IF-语句

评论

0赞 Teemu 1/18/2023

developer.mozilla.org/en-US/docs/Web/CSS/display

0赞 Tibrogargan 1/18/2023

对于某些人来说，最简单的方法是使用属性：例如hiddendocument.getElementsByClassName('etn-not-found-post').hidden = true

0赞 isostu 1/18/2023

不幸的是没有回答我的问题。我可以隐藏“.etn-not-found-post”DIV 没问题，但我希望在发生这种情况时显示第二个隐藏的 DIV。此 DIV 的 ID 为 #brxe-akqmjs。

0赞 Tibrogargan 1/19/2023

隐藏/显示第二个 div 的方式与第一个 div 完全相同。从字面上看，唯一的区别是用于选择 DOM 元素的方法。div

答：

0赞 Lokesh Yadav 1/18/2023 #1

这取决于带有 ID 的隐藏 DIV 是如何实现的。

让我尝试介绍两种方法：

DIV 是用 css 隐藏的，使用display: none;
DIV 使用属性隐藏hidden

对于这两种情况，首先按 ID 获取元素引用。例如

var divWithID = document.getElementById("divWithID");

现在对于案例 1，更新 style 属性。

dovWithId.style.display = "block";

对于情况 2，将隐藏属性值设置为false

divWithID.setAttribute("hidden", false);

希望这能帮助您并澄清您的问题。

评论

2赞 Mohammad Nasir 1/18/2023

调用 document.getElementById（）方法时不能添加 #。它只接受 ID 名称。

0赞 isostu 1/18/2023

感谢您的详细回复。我尝试跟随，但无法让第二个 DIV 在我上面的代码触发时显示。澄清一下，我可以隐藏“.etn-not-found-post”DIV类没问题......我只是无法让隐藏的 DIV ID 在它出现时显示。

0赞 Lokesh Yadav 1/18/2023

@isostu 您正在使用 display： none 或 hidden 属性隐藏您的第二个 DIV？另外，请尝试在放置实际代码的地方使用 [jsfiddle.net/] 或 [codesandbox.io/] 或 codepen.io/]。这将有助于我们更好地理解用例和问题陈述。

0赞 Mohammad Nasir 1/18/2023 #2

您可以简单地使用 jquery 和 method 来隐藏和显示内容。在这里，我以 jquery 格式重写函数。hide()show()

<script>
const divs = $('.etn-not-found-post');

for (let x = 0; x < divs.length; x++) {
    const div = divs[x];
    const content = div.textContent.trim();
  
    if (content == 'No Event Found' || content == 'Error') {
        div.hide();
    }else{
        div.show();
    }
}
</script>

评论

0赞 isostu 1/18/2023

感谢您的回复。不幸的是，它似乎不起作用，曾经隐藏在我上面的代码中的内容现在再次显示出来。为了清楚起见，我很高兴它被隐藏，但我只想在隐藏后显示第二个 DIV。

上一个：带有嵌套 if Stateme 的单选按钮计算器

下一个：在 javascript 中，按钮的单击事件未在循环外运行