gpt4 book ai didi

没有jquery的javascript可折叠表格

转载 作者:行者123 更新时间:2023-12-02 14:52:06 24 4
gpt4 key购买 nike

这是一个简单的问题,我似乎无法弄清楚,每个谷歌搜索都会返回一百万种通过 jquery 执行此操作的方法,但我更喜欢使用 vanilla javascript,因为我对它很陌生并且想学习它在使用任何库之前。我想做的是让一个按钮在单击时折叠表格的一部分,然后在再次单击时再次显示这些隐藏的部分。基本上只是切换一类元素的显示。

我有一个调用 test() 函数的按钮单击时我的 table 上没有任何变化。这是我的 JavaScript 代码。我使用 collapse[0] 因为如果我理解正确的话 collapse 是一个 nodeList 并且我总是一起关闭和打开所有这些,所以我只需要检查第一个元素.

function test() {
var collapse = document.getElementsByClassName("catOne");
var i = 0;//Counter for loops

if(collapse[0].style.display === "table-row"){
for(i = 0; i < collapse.length; i += 1){
collapse[i].style.display = "none";
}
}

if(collapse[0].style.display === "none"){
for(i = 0; i < collapse.length; i += 1){
collapse[i].style.display = "table-row";
}
}
}

我已经使用以下代码测试了该功能:

function test() {
var collapse = document.getElementsByClassName("catOne");
var i = 0;//Counter for loops

for (i = 0; i < collapse.length; i += 1) {
collapse[i].style.display = "none";
}

它在折叠元素方面工作得很好,所以显然问题出在我的 if 语句上,但我的 IDE Netbeans 不会抛出任何错误,据我所知它应该可以工作。

感谢您的帮助。

链接到 html 和 javascript: https://jsfiddle.net/ozjbekjy/

最佳答案

我怀疑有一些问题对您不利。

首先,您需要确保 test()函数在页面中的定义早于它的使用。对于 jQuery,这意味着使用 $(function(){})用于在 DOM 上应用事件处理程序的包装器。您可以使用 something like this answer 自己近似相同的事情.

否则,只需放置 <script>在表格之前的某个位置标记(可能在 <head> 中),并且 onclick 将起作用。

您还使用 i += 1您可以在哪里使用i++ - 他们完成相同的行为。

其次,不要操作样式属性,而是使用 classList.toggle()函数来简单地添加和删除具有规则 display: none 的类,像这样:

CSS

.hide-me {
display: none;
}

JavaScript

function test() {
var collapse = document.getElementsByClassName("catOne");

for (var i = 0; i < collapse.length; i++) {
collapse[i].classList.toggle("hide-me");
}
}

您的 JSFiddle,以及建议的更新:https://jsfiddle.net/ozjbekjy/4/

关于没有jquery的javascript可折叠表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36110128/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com