添加第二個元素后第一個元素不切換-有解無憂

我創建了創建元素的函式

function createElements(value) {
  //Create div .toggler
  const toggler = document.createElement('div');
  toggler.classList.add('toggler');

  //Create div .content
  const content = document.createElement('div');
  content.classList.add('content');

  //Append div .toggler in div .container
  container.append(toggler);

  //Append div .content in div .container
  container.append(content);

  toggler.innerText = 'Click me';
  content.innerText = value;
}

如果我單擊切換器“單擊我”，則應顯示和隱藏內容的功能

function toggleContent() {
  //Get created elements
  const togglers = document.querySelectorAll('.toggler'),
    contents = document.querySelectorAll('.content');

  //Toggle both div .active
  togglers.forEach((toggler, index) => {
    const content = contents[index];

    //Get div .content height
    const contentHeight = content.clientHeight   'px';

    //Set div .content height
    content.style.height = '0px';

    //Toggle event
    toggler.addEventListener('click', () => {
      if (!toggler.classList.contains('active')) {
        toggler.classList.add('active');
      } else {
        toggler.classList.remove('active');
      }

      if (!content.classList.contains('active')) {
        content.classList.add('active');
        content.style.height = contentHeight;
      } else {
        content.classList.remove('active');
        content.style.height = '0px';
      }
    });
  });
}

將這兩個功能放在按鈕事件中

//Create html elements and set value inner them event
btn.addEventListener('click', () => {
  createElements(input.value);
  toggleContent();

  //Clear input value
  input.value = '';
  //   console.log(input.value);
});

一切正常，但如果我添加第二個元素，第一個元素切換器不起作用

顯示代碼片段

//Get html elements
const container = document.querySelector('.container'),
  input = document.querySelector('.input'),
  btn = document.querySelector('.btn');

function createElements(value) {
  //Create div .toggler
  const toggler = document.createElement('div');
  toggler.classList.add('toggler');

  //Create div .content
  const content = document.createElement('div');
  content.classList.add('content');

  //Append div .toggler in div .container
  container.append(toggler);

  //Append div .content in div .container
  container.append(content);

  toggler.innerText = 'Click me';
  content.innerText = value;
}

function toggleContent() {
  //Get created elements
  const togglers = document.querySelectorAll('.toggler'),
    contents = document.querySelectorAll('.content');

  //Toggle both div .active
  togglers.forEach((toggler, index) => {
    const content = contents[index];

    //Get div .content height
    const contentHeight = content.clientHeight   'px';

    //Set div .content height
    content.style.height = '0px';

    //Toggle event
    toggler.addEventListener('click', () => {
      if (!toggler.classList.contains('active')) {
        toggler.classList.add('active');
      } else {
        toggler.classList.remove('active');
      }

      if (!content.classList.contains('active')) {
        content.classList.add('active');
        content.style.height = contentHeight;
      } else {
        content.classList.remove('active');
        content.style.height = '0px';
      }
    });
  });
}

//Create html elements and set value inner them event
btn.addEventListener('click', () => {
  createElements(input.value);
  toggleContent();

  //Clear input value
  input.value = '';
  //   console.log(input.value);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  overflow: hidden;
}

    <input type="text" class="input" />
    <button class="btn">add</button>
    
    <div class="container">
      <!-- <div ></div>
      <div ></div> -->
    </div>

uj5u.com熱心網友回復：

由于兩個原因，第一個切換器（以及添加更多元素時的后續切換器）停止作業：

每次添加新元素時，您都會向現有元素添加另一個點擊偵聽器（因此，當添加第二個元素時，第一個元素會獲得另一個點擊偵聽器，這會在以后引起一些奇怪）
每次為您記住的每個現有專案添加一個新元素時clientHeight，如果它們實際上處于折疊狀態，您將存盤0px到contentHeight這樣新的單擊處理程式將始終0px用于展開狀態高度。最好切換display: none和display: block（或行內或行內塊，無論你需要）

我將點擊處理程式注冊移動到第一個函式，這樣每個創建的元素都只有一個點擊處理程式。

我洗掉了 clientHeight/contentHeight 邏輯，只是添加了一個 CSS 規則，以便.content專案在何時.active可見，否則不可見。所以變化是CSS中的這部分

.content {
  display: none;
}

.content.active {
   display: block;
}

我保持這樣的邏輯，即當您添加一個新專案時，它將折疊所有現有專案。我認為這也是你的邏輯，但如果你不想要，請告訴我。

更改在 JS 代碼中

//Toggle both div .active
togglers.forEach((toggler, index) => {
    const content = contents[index];

    // I added this to keep the same logic you had before
    // if you would like to not collapse them, just remove the 2 lines
    toggler.classList.remove('active');
    content.classList.remove('active');
});

//Get html elements
const container = document.querySelector('.container'),
  input = document.querySelector('.input'),
  btn = document.querySelector('.btn');

function createElements(value) {
  //Create div .toggler
  const toggler = document.createElement('div');
  toggler.classList.add('toggler');

  //Create div .content
  const content = document.createElement('div');
  content.classList.add('content');

  //Append div .toggler in div .container
  container.append(toggler);

  //Append div .content in div .container
  container.append(content);

  toggler.innerText = 'Click me';
  content.innerText = value;

  toggler.addEventListener('click', () => {
      if (!toggler.classList.contains('active')) {
        toggler.classList.add('active');
      } else {
        toggler.classList.remove('active');
      }

      if (!content.classList.contains('active')) {
        content.classList.add('active');
      } else {
        content.classList.remove('active');
      }
    });
}

function toggleContent() {
  //Get created elements
  const togglers = document.querySelectorAll('.toggler'),
    contents = document.querySelectorAll('.content');

  //Toggle both div .active
  togglers.forEach((toggler, index) => {
    const content = contents[index];

    toggler.classList.remove('active');
    content.classList.remove('active');
  });
}

//Create html elements and set value inner them event
btn.addEventListener('click', () => {
  createElements(input.value);
  toggleContent();

  //Clear input value
  input.value = '';
  //   console.log(input.value);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  display: none;
}

.content.active {
   display: block;
}

    <input type="text" class="input" />
    <button class="btn">add</button>
    
    <div class="container">
      <!-- <div ></div>
      <div ></div> -->
    </div>

uj5u.com熱心網友回復：

在您的函式中toggleContent()，每次添加新元素時，您都會向所有現有的切換器添加一個新的事件偵聽器。

這意味著當您添加兩個元素時，第一個切換器將有兩個事件，并且兩個事件都會執行并導致意外行為。

一種解決方案可能是在向切換器添加事件偵聽器時向切換器添加一個新類，因此您可以確定不會將多個偵聽器附加到同一元素。然后，在您的document.querySelectorAll()函式中，您可以使用not運算子來排除那些已經具有事件偵聽器的元素

//Get html elements
const container = document.querySelector('.container'),
  input = document.querySelector('.input'),
  btn = document.querySelector('.btn');

function createElements(value) {
  //Create div .toggler
  const toggler = document.createElement('div');
  toggler.classList.add('toggler');

  //Create div .content
  const content = document.createElement('div');
  content.classList.add('content');

  //Append div .toggler in div .container
  container.append(toggler);

  //Append div .content in div .container
  container.append(content);

  toggler.innerText = 'Click me';
  content.innerText = value;
}

function toggleContent() {
  //Get created elements
  const togglers = document.querySelectorAll(
    '.toggler:not(.event-added)');   // using not operator
  const contents = document.querySelectorAll(
    '.content:not(.event-added)');   // using not operator

  //Toggle both div .active
  togglers.forEach((toggler, index) => {
    const content = contents[index];

    //Get div .content height
    const contentHeight = content.clientHeight   'px';

    //Set div .content height
    content.style.height = '0px';

    //Toggle event
    toggler.addEventListener('click', () => {

      toggler.classList.add("event-added");    // Add new class
      content.classList.add("event-added");

      if (!toggler.classList.contains('active')) {
        toggler.classList.add('active');
      } else {
        toggler.classList.remove('active');
      }

      if (!content.classList.contains('active')) {
        content.classList.add('active');
        content.style.height = contentHeight;
      } else {
        content.classList.remove('active');
        content.style.height = '0px';
      }
    });
  });
}

//Create html elements and set value inner them event
btn.addEventListener('click', () => {
  createElements(input.value);
  toggleContent();

  //Clear input value
  input.value = '';
  //   console.log(input.value);
});

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  overflow: hidden;
}

<input type="text" class="input" />
<button class="btn">add</button>

<div class="container">
  <!-- <div ></div>
  <div ></div> -->
</div>

uj5u.com熱心網友回復：

不確定是否理解您的問題...

const
  container = document.querySelector('.container')
, input     = document.querySelector('.input')
, btn       = document.querySelector('.btn')
, contents  = []
  ;
btn.onclick = e =>
  {
  let inValue = input.value.trim()

  if (!inValue) return

  const
    toggler = document.createElement('div')  
  , content = document.createElement('div') 
    ;
  toggler.className = 'toggler'
  toggler.innerText = 'Click me'

  content.className   = 'content'
  content.textContent = inValue;

  container.append(toggler);
  container.append(content);

  contents.push(content)

  input.value = '' // clear input
  toggler.click()
  input.focus()
  }
container.onclick = e =>
  {
  if (!e.target.matches('div.toggler')) return

  let nxtContent = e.target.nextElementSibling

  if (nxtContent.classList.toggle('active'))
    contents.forEach(c=>c.classList.toggle('active', c===nxtContent))
  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
.content {
  display: none;
  }
.content.active {
  display: block;
  }
.toggler {
  cursor: pointer;
  }

<input type="text" class="input" />
<button class="btn">add</button>

<div class="container">
  <!-- <div ></div>
  <div ></div> -->
</div>

你想做這樣的事嗎？

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406973.html

標籤：

上一篇：Vue.js錯誤：TypeError：無法讀取未定義的屬性

下一篇：如何在javascript中使用帶有結果的回呼函式實作無限柯里化總和值？