单词搜索中的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的信息,但在这里看不到如何使用

预先感谢您的帮助

最佳答案

适用于您的过滤器列表的解决方案如下所示: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 - JavaScript如何使用功能match()?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52400783/

10-11 05:30