Question

我想要一种更快的方式来显示/隐藏20000多个dom元素。

我发现使用import numpy as np import matplotlib.pyplot as plt def pol2cart(rho, phi): # https://stackoverflow.com/questions/20924085/python-conversion-between-coordinates x = rho * np.cos(phi) y = rho * np.sin(phi) return(y, x) def spiral(): C = 0.15 phi = np.linspace(6, 540, 1000) rho = (1 - C * np.log(phi - 5)) # Now convert back to x, y coordinates y, x = pol2cart(rho, np.deg2rad(phi)) # Center the spiral so we can see it better. x -= x.min() y -= y.min() x += 1 y += 1.5 m = np.zeros((100, 100)) for i in range(len(x)): try: # Include some scaling factor to increase the size of the curve m[int(x[i]*30), int(y[i]*30)] = 1 except IndexError: continue return m plt.imshow(spiral())

非常慢

我认为这是因为我导致了浏览器的太多重排。

但是仅仅element.style.display = "none"是不够的，因为元素的高度仍然存在

还有更好的方法吗？

我只能使用Google关闭

有一个可运行的示例。但是在我的项目中，大约有2万多个复选框

element.style.visibility = "hidden"

function filter_change (txt) {
  var eles = document.getElementsByClassName("checkbox_container");
  for (var i = 0; i < eles.length; i++) {
    var cnt = eles[i];
    var ipt = cnt.getElementsByTagName("input")[0];
    if (ipt.id.indexOf(txt.value) < 0) {
      cnt.style.display = "none";
    } else {
      cnt.style.display = "flex";
    }
  }
}

Answer 1

您可以使用CSS：

.checkbox_container input[id*='15'] {
   display: none;
}

请参见this fiddle

或在JavaScript代码中使用CSS选择器，然后添加类：

document.querySelectorAll('.checkbox_container input[id*="' + txt.value '"]')
   .forEach(el => el.classList.add('hidden'))

将“隐藏”类定义为：

.hidden { display: none; }

重要

使用您的JavaScript代码，确保您验证txt.value，以使其仅包含对CSS类名称有效的字符。

有没有更快的方法来隐藏/显示html元素？

1 个答案: