Question

我正在尝试构建一个两级过滤器，该过滤器显示和隐藏列表中的元素。第一阶段基于静态选择选项显示和隐藏元素。

第二阶段根据随时间增长的变量列表中的选择选项显示和隐藏元素。

我已经成功地将一些JavaScript和第一阶段过滤与在线可用信息组合在一起。

我正在努力进行第二阶段（过去2周），我知道我需要做些什么，但是将其放到JavaScript中似乎对我不起作用。我尝试的所有方法都会失败。

我了解我需要做的大部分事情（我想...）：

捕获所有复选框值并将其推入数组。
将它们变成索引。
遍历列表，并将索引数组与所有表示“ show”类的元素进行比较。

3a。运行条件语句，检查是否包含标签<h6>内容的匹配项，如果找不到匹配项，则删除类“ show”。

我认为我有一些作品，但似乎无法正确地将它们组合在一起。我希望我能提供足够的信息。

请帮助，我是JavaScript的新手。

还，有人可以告诉我这样的列表过滤系统的技术术语吗？

function openPage(pageName, elmnt) {
  // Hide all elements with class="tabcontent" by active */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";

}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("projectStatus");
var btns = btnContainer.getElementsByClassName("tablink");
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";
  });
}



// Get the element with id="activeOpen" and click on it
document.getElementById("defaultOpen").click();



//filtering elements
filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("result-thumb");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    ekRemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) ekAddClass(x[i], "show");
  }
}

// Show filtered elements
function ekAddClass(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];
    }
  }
}


// Hide elements that are not selected
function ekRemoveClass(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(" ");
}


//Clear all selections from filterring form and show all results
function clearAllSelected() {
  var checkboxes = new Array();
  checkboxes = document.getElementsByTagName('input');

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = false;
    }
  }
  document.getElementById('showAll').click();
}

.result-thumb {
  border: 1px solid #000;
  display: none;
  margin: 15px;
  padding: 3px;
}

.show {
  display: block;
}

h6,
p {
  padding: 0;
  margin: 0;
}

li {
  display: block;
}

<div id="projectStatus" class="tabs-buttons">
  <button class="tablink" onclick="filterSelection('current');" id="defaultOpen">Active Projects</button>
  <button class="tablink active" onclick="filterSelection('past');">Past Projects</button>
  <button class="tablink" onclick="filterSelection('all');">All Projects</button>
</div>
<div id="PastProjects" class="tabcontent">
  <p>Choose an area of focus</p>
  <li><input type="checkbox" name="vehicle1" value="Deirdre" oninput="filterCheck()" id="select-aofi"> Bob</li>
  <li><input type="checkbox" name="vehicle1" value="Bill" oninput="filterCheck()" id="select-aofi"> David</li>
  <li><input type="checkbox" name="vehicle1" value="Teresa" oninput="filterCheck()" id="select-aofi"> Teresa</li>
</div>

<div class="result-thumb current">
  <p>Current: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6 class="">David</h6>
</div>
<!-- end.result-thumb -->

<div class="result-thumb past">
  <p>Past: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6>Teresa</h6>
</div>
<!-- end.result-thumb -->

<div class="result-thumb past">
  <p>Past: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6>Bob</h6>
</div>
<!-- end.result-thumb -->

使用具有多个复选框值的填充数组（JavaScript

0 个答案: