个人中心
gpt4 book ai didi

Javascript 如何使用函数 match()？

转载 作者：行者123 更新时间：2023-11-28 01:05:24 27 4
gpt4 key购买 nike

我的 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");
    }
}

我看到了有关 Regex 的信息，尤其是函数 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 如何使用函数 match()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52400783/

27 4 0
文章推荐： html - 如何在移动应用程序上保持设计比例？
文章推荐： css - 如何在 CSS3 中更改 mat-checkbox 背景颜色？ Angular 6
文章推荐： c++ - 为什么我们在派生类中使用 Using Declaration？
文章推荐： html - 如何在启用触摸(Retina 显示屏)的情况下将 css 定位写入 Macbook
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com