javascript - 当我使用 Javascript 添加新的 CSS 样式时，那里的 JS 停止工作

Question

我有一个 JavaScript 待办事项列表，在我向其中添加以下代码之前一直有效。风格。 (整个代码保存在 https://codepen.io/hmcka/pen/vYBgZVN )。是的，我想使用纯 JS。

function toggleShimmer(e) {
    box.classList.add("shimmer");
}

我不明白为什么最初停止工作，但我想知道这是否与我添加的 CSS 附加到包装器并且 JavaScript 附加到包装器内的元素这一事实有关.

我已经尝试了一些方法来解决这个问题。首先，我尝试在 add.classList 上放置一个计时器，以便之后可以删除该样式。但是，当我这样做时，当我单击复选框时，样式会再次出现。我尝试做的另一件事是调整列表项的 z-index。

初学者将不胜感激任何建议。

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];
const box = document.querySelector('#rectWrapper');

function addItem(e) {
  e.preventDefault();
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    text,
    done: false
  };

  items.push(item);
  populateList(items, itemsList);
  localStorage.setItem('items', JSON.stringify(items));
  this.reset();
}

function populateList(plates = [], platesList) {
  platesList.innerHTML = plates.map((plate, i) => {
    return `
      <li>
        <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
        <label for="item${i}">${plate.text}</label>
      </li>
    `;
  }).join('');
}

function toggleDone(e) {
  if (!e.target.matches('input')) return; // skip this unless it's an input
  const el = e.target;
  const index = el.dataset.index;
  items[index].done = !items[index].done;
  localStorage.setItem('items', JSON.stringify(items));
  populateList(items, itemsList);
}

function toggleShimmer(e) {
  box.classList.add("shimmer");

}

window.addEventListener("load", toggleShimmer);
box.addEventListener('mouseenter', toggleShimmer);
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);

populateList(items, itemsList);

html {
  /* background-color: #B01E84B01E84; */
  background: rgba(153, 25, 117, 1);
  background: -moz-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(153, 25, 117, 1)), color-stop(100%, rgba(212, 19, 157, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
  background: linear-gradient(135deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
  box-sizing: border-box;
  /* background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; */
  /* background-size: cover; */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* svg {
  fill:white;
  background: rgba(0,0,0,0.1);
  padding: 20px;
  border-radius: 50%;
  width: 200px;
  margin-bottom: 50px;
} */

.wrapper {
  padding: 20px;
  max-width: 350px;
  background-color: #7A0857;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}

.shimmer {
  position: relative;
  overflow: hidden;
  /* width: 50px; */
  /* height: 50px; */
  display: inline-block;
  /* margin: 25px 0 25px 25px; */
  /* border-radius: 5px; */
  color: #fff;
}


/*The "shine" element */

.shimmer:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
  /* display: none; */
  display: block;
  /* display: inline; */
}


/* Hover state - trigger effect */

.shimmer:hover:after {
  opacity: 1;
  top: -40%;
  left: -40%;
  transition-property: left, top, opacity;
  transition-duration: 1.4s, 1.4s, 0.3s;
  transition-timing-function: ease;
}


/* Active state */

.shimmer:active:after {
  opacity: 0;
}

h2 {
  text-align: center;
  margin: 0;
  font-weight: 200;
}

.plates {
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
}

.plates li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 0;
  font-weight: 100;
  display: flex;
}

.plates label {
  flex: 1;
  cursor: pointer;
}

.plates input {
  display: none;
}

.plates input+label:before {
  content: '⬜️';
  margin-right: 10px;
}

.plates input:checked+label:before {
  content: '🌮';
}

.add-items {
  margin-top: 20px;
}

.add-items input {
  padding: 10px;
  outline: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

<div id="rectWrapper" class="wrapper">
  <h2>TO-DO LIST</h2>
  <p></p>
  <ul class="plates">
    <li>Loading Tapas...</li>
  </ul>
  <form class="add-items">
    <input type="text" name="item" placeholder="Item Name" required>
    <input type="submit" value="+ Add Item">
  </form>
</div>

Answer 1

表单上有一个伪元素 (shimmer:after)，防止您单击输入字段或添加按钮。

最简单的解决方案是使用 pointer-events使微光对鼠标事件“透明”:

.shimmer:after {
  pointer-events: none;
}