个人中心
gpt4 book ai didi

javascript - 单击时克隆的元素无法使用 Javascript [使用 Vanilla Js no JQuery]

转载 作者：行者123 更新时间：2023-11-30 20:11:37 26 4
gpt4 key购买 nike 

let btn = document.querySelector('button'),
    ul = document.getElementById('lista');


btn.onclick = () =>{
    ele =  ul.children[0].cloneNode(true, true);
    ele.innerHTML = 'item #' + (ul.children.length +1)
    ul.appendChild(ele);

}

 
Array.prototype.forEach.call(ul.children , child => {
    child.onclick = () => {
        document.getElementById('heading').textContent = child.textContent;
        Array.prototype.forEach.call(ul.children, wald  =>{
            wald.classList.remove('active')
        })
        child.classList.add('active');
        
    }
})
 
*{
  
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.container{
    width: 60%;
    margin: 30px auto;
    border: 1px solid;
    padding: 30px 10px;


}


.container h1{
    text-align: center;
    background-color: tomato;
    color: #fff;

}

.container button{
    padding: 10px 20px;
    background-color: tomato;
    font-weight: bold;
    font-size: 18px;
    color: #FFF;
    border: none;
    cursor: pointer;


}
.container button:active{
    transform: scale(.99)
}


.container ul li{
    list-style-position: inside;
    padding: 7px 15px
}

.active{
    background-color: tomato;
    color: #FFF;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link rel="stylesheet" href="css/app.css" />
</head>

<body>
    <div class="container">
        <h1 id="heading">item here ! </h1>
        <button>add item</button>
        <ul id="lista">
            <li>item #1</li>
            <li>item #2</li>
            <li>item #3</li>
        </ul>
    </div>
     
    <script src="js/app.js"></script>
</body>

</html>

克隆元素问题

此代码的第一个事件是将新的克隆元素添加到 <ul>当我点击按钮时。

第二个事件，当我点击 li 时它假设有类 .active .. 但是这第二个事件只适用于原始项目而不适用于新项目。

那么将处理程序附加到新元素的解决方案是什么？

最佳答案

事件处理程序在开始时只被调用一次，所以它只能看到现有的元素。我的修复是每次添加新元素时都会调用事件处理程序。此外，要优化它，您不必每次都经过循环并在所有项目上添加事件监听器。只有新项目才会在按钮单击时添加事件监听器

let btn = document.querySelector('button'),
  ul = document.getElementById('lista');


btn.onclick = () => {
  ele = ul.children[0].cloneNode(true, true);
  ele.innerHTML = 'item #' + (ul.children.length + 1)
  ul.appendChild(ele);
  addHandlerToItem(ele);
}

var eventHandler = function() {
  Array.prototype.forEach.call(ul.children, child => {
    addHandlerToItem(child);
  });
}

var addHandlerToItem = function(child) {
  child.onclick = () => {
    document.getElementById('heading').textContent = child.textContent;
    Array.prototype.forEach.call(ul.children, wald => {
      wald.classList.remove('active')
    })
    child.classList.add('active');
  }
};


eventHandler();
* {
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  width: 60%;
  margin: 30px auto;
  border: 1px solid;
  padding: 30px 10px;
}

.container h1 {
  text-align: center;
  background-color: tomato;
  color: #fff;
}

.container button {
  padding: 10px 20px;
  background-color: tomato;
  font-weight: bold;
  font-size: 18px;
  color: #FFF;
  border: none;
  cursor: pointer;
}

.container button:active {
  transform: scale(.99)
}

.container ul li {
  list-style-position: inside;
  padding: 7px 15px
}

.active {
  background-color: tomato;
  color: #FFF;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <link rel="stylesheet" href="css/app.css" />
</head>

<body>
  <div class="container">
    <h1 id="heading">item here ! </h1>
    <button>add item</button>
    <ul id="lista">
      <li>item #1</li>
      <li>item #2</li>
      <li>item #3</li>
    </ul>
  </div>

  <script src="js/app.js"></script>
</body>

</html>

关于javascript - 单击时克隆的元素无法使用 Javascript [使用 Vanilla Js no JQuery]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52346450/

26 4 0
文章推荐： javascript - 附加后无法克隆片段？
文章推荐： c# - IQueryable 和 Queryable 之间的区别
文章推荐： c# - 运行单元测试时更改 app.config
文章推荐： c - 如何将一个数分成正数、负数、整数和分数三部分
行者123
个人简介

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

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