Question

我的单词搜索中的javascript代码有问题。让我解释一下：

我有一个这样的HTML页面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>xPression Reports</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>  
<body>
<a href="toolbox.cnav.fr"><button>Accueil</button></a>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">Show all</button>
<button class="btn" onclick="filterSelection('bis')">bis</button>
<button class="btn" onclick="filterSelection('bis.xindd')">bis.xindd</button>
</div>
<div class="container">
<div class=" filterDiv bis" >bis 2017/06</div>
<div class=" filterDiv bis" >bis 2017/07</div>
<div class=" filterDiv bis.xindd" >bis.xindd 2017/06</div>
<div class=" filterDiv bis.xindd" >bis.xindd 2018/01</div>
</div>
<script src="index.js"></script>
</body>
</html>

（我简化了）

使用CSS：

body{
    background-color: #d3d3d3;
}

.container {
    overflow: hidden;
}

.filterDiv {
    float: left;
    color: black;
        border: 1px solid black;
    width: auto;
    text-align: center;
    margin: 2px;
    display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #666;
  color: white;
}

img {
    width:50px;
}

和一个javascript：

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
    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++) {
    w3RemoveClass(x[i], "show");
    if (x[i].matches(c) > -1) w3AddClass(x[i], "show");
    }
}

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

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
 arr1 = element.className.split(" ");
 //alert(arr1);
  arr2 = name.split(" ");
    //alert(arr2);
  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 control 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";
  });
}

一切正常，因为当我单击一个按钮时，仅显示与该按钮相对应的框架。但是，对于其中的6个不能与bis和bis.xindd一起使用的情况，我认为是因为js仅使用“ bis”进行搜索，因此当我单击“ bis”时，将显示bis和bis.xindd。 >

我认为错误来自此功能：

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
    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++) {
    w3RemoveClass(x[i], "show");
    if (x[i].matches(c) > -1) w3AddClass(x[i], "show");
    }
}

我看到了有关正则表达式的信息，尤其是ma * tch函数，但在这里看不到如何使用

预先感谢您的帮助

Answer 1

适用于您的过滤器列表的解决方案如下：https://jsfiddle.net/jkrielaars/szagq5hm/31/

但是：类名中的句点不是一个好主意。

这是您的代码无法正常工作的原因： 在https://developer.mozilla.org/en-US/docs/Web/API/Element/matches上，它声明参数应为元素选择器字符串。您的班级名称中有句号会使情况变得混乱。

您需要添加句点以表明您正在处理一个类，但是，由于您在类名中也有一个句点，因此将出现以下句点：“ .bis.xindd”。

如果您将其视为选择器字符串，则表示这是一个具有.bis和.xindd类的元素。这不是您的目标。

如果您坚持在类名中使用句点，请查看.classList.contains（）。在下面，您可以看到它与.matches（）有何不同。

var test1 = document.getElementById('test1')
var test2 = document.getElementById('test2')


console.debug('matches does not work without the class period', test1.matches('bis'));
console.debug('matches does not work without the class period', test2.matches('bis.xindd'));
console.debug('matches does work with the class period', test1.matches('.bis'));
console.debug('matches does not work with a class name with a period in it', test2.matches('.bis.xindd'));

console.debug('test1 should contain bis',  test1.classList.contains("bis"));
console.debug('test 2 should contain bis.xindd',  test2.classList.contains("bis.xindd"));


console.debug('test2 should not match with just "bis"',  test2.classList.contains("bis"));

<div id="test1" class="filterDiv bis">bis 2017/06</div>
<div id="test2" class="filterDiv bis.xindd" >bis.xindd 2017/06</div>

JavaScript如何使用功能match（）？

1 个答案: