Question

我正在尝试在纯JavaScript中切换div的类（不幸的是，我无法使用jQuery）。我有一些代码可以正常工作，但不适用于div的多个实例，对此我将不胜感激。

我不能给每个元素赋予它自己的特定ID，因此我需要一种方法来仅将div类作为“ truncate”类的目标，该类是被单击的特定按钮的父级。目前，我默认情况下已隐藏结果，而只是切换“显示”类

<div class="truncate">
  <div class="result">Result 1</div>
  <div class="result">Result 2</div>
  <div id="button">Show more</div>
</div>

collapse= document.getElementById('button');

collapse.onclick = function() {
  collapse.parentElement.classList.toggle("show");
};


/* HIDE PLATES BY DEFAULT */
.truncate .result {
  display: none;
}
/* SHOW RESULTS WHEN SHOW CLASS APPLIED */
.truncate.show .result {
  display: block !important;
}

谢谢-帮助一如既往。

Answer 1

我认为您需要getElementsByClassName

(function() {
    var collapse = document.getElementsByClassName('button');
    for (var elIndex = 0; elIndex < collapse.length; elIndex++) {
        collapse[elIndex].onclick = function() {
          this.parentElement.classList.toggle("show");
        };
    }
})();

/* HIDE PLATES BY DEFAULT */
.truncate .result {
  display: none;
}
/* SHOW RESULTS WHEN SHOW CLASS APPLIED */
.truncate.show .result {
  display: block !important;
}

<div class="truncate">
  <div class="result">Result 1</div>
  <div class="result">Result 2</div>
  <div class="button">Show more</div>
</div>

<div class="truncate">
  <div class="result">Result 1</div>
  <div class="result">Result 2</div>
  <div class="button">Show more</div>
</div>

<div class="truncate">
  <div class="result">Result 1</div>
  <div class="result">Result 2</div>
  <div class="button">Show more</div>
</div>

Answer 2

您应该将“显示更多”的ID替换为课程。并使用以下代码。

collapse =document.getElementsByClassName('button');
for(let i = 0; i < collapse.length; i++){
  let oneElement = collapse[i];
  oneElement.addEventListener('click', function() {
   oneElement.parentElement.classList.toggle("show");
  })
}

Answer 3

解析（循环）您所有的div.truncate元素，并通过Accordionize函数提供自己的功能。

const Accordionize = el => {
  const results = el.querySelectorAll('.result')
  const toggleButton = el.querySelector('button')
  let open = false
  
  const _toggle = () => {
    const action = open ? 'remove' : 'add'
    
    results.forEach(item => item.classList[action]('show'))
    open = !open
  }
  
  toggleButton.addEventListener('click', _toggle)
}

// get all div.truncate and apply them to their own instance of Accordionize
document.querySelectorAll('.truncate').forEach(Accordionize)

.truncate {
  border: 2px solid red;
  margin: 5
}
.result {
  display: none;
}
.show {
 display: block
}

<div class="truncate">
  <div class="result">Result 1</div>
  <div class="result">Result 2</div>
  <button>Show more1</button>
</div>
<div class="truncate">
  <div class="result">Result 3</div>
  <div class="result">Result 4</div>
  <button>Show more2</button>
</div>
<div class="truncate">
  <div class="result">Result 5</div>
  <div class="result">Result 6</div>
  <button>Show more3</button>
</div>
<div class="truncate">
  <div class="result">Result 7</div>
  <div class="result">Result 8</div>
  <button>Show more4</button>
</div>

纯JS仅将类添加到重复元素之一

3 个答案: