时间戳

首页 > 解决方案 > 使用 javaScript 击键后更改 css Display 属性

javascript - 使用 javaScript 击键后更改 css Display 属性

问题描述

我想添加一个事件侦听器或类似的东西来改变character类的显示CSS从none到grid在搜索栏中键入键时。我尝试了几种方法，但运气不佳，也不太确定如何使用它。我还想让元素可点击。任何帮助将不胜感激。代码

HTML

<html lang="zh">
  <头部>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文档</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <正文>
    <div class="容器">
      <h1>✨哈利波特人物 ✨</h1>
      <div id="searchWrapper">
        <输入
          类型=“文本”
          名称="搜索栏"
          id="搜索栏"
          placeholder="搜索字符"
        />
      </div>
      <ul id="charactersList"></ul>
    </div>
    <script src="app.js"></script>
  </正文>
</html>

CSS

body {
  font-family: sans-serif;
  background-color: #111d4a;
}

* {
  box-sizing: border-box;
}
h1 {
  color: #eee;
  margin-bottom: 30px;
}
.container {
  padding: 40px;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
}

#charactersList {
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 20px;
}

.character {
  list-style-type: none;
  background-color: #eaeaea;
  border-radius: 3px;
  padding: 10px 20px;
  display: none;
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    "name"
    "house";
  text-align: left;
}

.hide {
  display: none;
}

.character > h2 {
  grid-area: name;
  margin-bottom: 0px;
}

.character > p {
  grid-area: house;
  margin: 0;
}

#searchBar {
  width: 100%;
  height: 32px;
  border-radius: 3px;
  border: 1px solid #eaeaea;
  padding: 5px 10px;
  font-size: 12px;
}

#searchWrapper {
  position: relative;
}

#searchWrapper::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 15px;
}

JS

const charactersList = document.getElementById("charactersList");
const searchBar = document.getElementById("searchBar");
let hpCharacters = [];

searchBar.addEventListener("keyup", (e) => {
  const searchString = e.target.value.toLowerCase();

  const filteredCharacters = hpCharacters.filter((character) => {
    return character.name.toLowerCase().includes(searchString);
  });
  displayCharacters(filteredCharacters);
});

const loadCharacters = async () => {
  try {
    const res = await fetch("https://hp-api.herokuapp.com/api/characters");
    hpCharacters = await res.json();
    displayCharacters(hpCharacters);
  } catch (err) {
    console.error(err);
  }
};

const displayCharacters = (characters) => {
  const htmlString = characters
    .map((character) => {
      return `
            <li class="character">
                <h2>${character.name}</h2>
                <p>House: ${character.house}</p>
            </li>
        `;
    })
    .join("");
  charactersList.innerHTML = htmlString;
};

loadCharacters();

标签： javascriptcss

解决方案

所以

所以我想添加一个事件监听器或类似的东西，当在搜索栏中键入一个键时，将css中“字符”类的显示从“无”更改为“网格”。

您可以通过应用事件侦听器（即按键事件侦听器）来做到这一点 - 在该函数回调上，只需使用element.classlist.toggleorelement.classlist.add将另一个类添加到具有网格显示的元素。

另一种方法也将事件侦听器用于您选择的按键，但在回调中，编辑相关元素的样式 - 所以

addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      element.style.display="grid";

    // to make the element clickable - just add another event listener to it - 
    }
});

对于按下的任何键，事件侦听器都是 keydown -

https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

addEventListener('keydown', function (e) {
        
          element.style.display="grid"; 
    
    });

希望有帮助-W

推荐阅读