时间戳

首页 > 解决方案 > 我正在尝试制作一个看起来已经完成的图像过滤器，但唯一的是当我加载页面时它是空白的，直到我点击过滤器列表

javascript - 我正在尝试制作一个看起来已经完成的图像过滤器，但唯一的是当我加载页面时它是空白的，直到我点击过滤器列表

问题描述

这是我从 W3SCHOOLS 获得的代码。除了在第一个页面加载时它给了我一个空白页面之外，这一切都有效，但是当我点击其中一个主题之后，它就可以工作了。

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}```

标签： javascript

解决方案

您没有共享代码中包含的 html 部分，但无论如何它都是可以猜测的。您可以将显示类添加到您想在首次加载时显示的任何一个。例如<div class="filterDiv typo show">...</div>，如果您想在第一次加载时显示错字部分。

推荐阅读