当我更新我的列表时，它没有在后端更新列表的数量仍然相同，为啥？
Posted
技术标签:
【中文标题】当我更新我的列表时，它没有在后端更新列表的数量仍然相同，为啥？【英文标题】：when i am updating my list then its not getting updated in the backend the count of list is still the same why?当我更新我的列表时，它没有在后端更新列表的数量仍然相同，为什么？ 【发布时间】：2020-09-08 07:09:43 【问题描述】：我正在尝试更新列表，但是当我添加一个新元素然后计算编号时。该列表中元素的值仍然与之前的值相同
这里是代码
我正在尝试通过单击列表来更新文件中的部分名称，当我不添加任何新部分时它工作正常，但是当我添加一个新部分时，li 上的 eventListener 停止工作。
<!DOCTYPE html>
<html>
<head>
<title>sections</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="sidebar col col-lg-3">
<center><h3>Sections</h3></center><hr>
<ul class="list">
<li>K19SP</li>
<hr>
<li>K19PV</li>
<hr>
<li>K19MA</li>
<hr>
<li>K19RQ</li>
<hr>
<li>K19MS</li>
<hr>
<li>K19LS</li>
<hr >
<li>K19DQ</li>
<hr>
<li>K19MR</li>
<hr>
<li>K19OH</li>
<hr>
</ul>
</div>
<div class="col col-lg-9">
<center><h3 id='head'></h3></center>
<div class="sidebar-right col col-lg-3">
<button class="btns">Add Student</button>
<button class="btns">Remove Student</button>
<button class="btns">Upload Assignment</button>
<button class="btns">View Status</button>
<button class="btns"> Upload Reading Material</button>
<button class="btns">Remove Section</button>
</div>
</div>
</div>
<div class="row">
<div class="col col-lg-3">
<input type="text" name="sect" id="sect">
<button type="button" id="add" onclick="getInput()">ADD</button>
</div>
</div>
</div>
<script type="text/javascript" src="app.js">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
this is javascript
var ul = document.querySelector('ul');
var input = document.getElementById('sect');
var head = document.querySelector('#head');
function getInput()
ul.innerHTML = ul.innerHTML + "<li>"+input.value+"</li> <hr>";
var li = document.querySelectorAll('li');
var total = document.querySelectorAll('li').length;
for(let i=0 ; i< total ; i++)
li[i].addEventListener('click',() => head.innerHTML = li[i].innerHTML);
【问题讨论】：
您不只是添加li。您正在替换 ul 的整个 innerHTML。所有事件侦听器都将丢失。使用appendChild()。
另外，ul 的唯一有效子代是 li。您不应将 hr 元素作为列表的子元素。
【参考方案1】：
用以下代码替换您的脚本。每次添加新项目时，都需要将侦听器添加到 li。
UpdateListener() 会为你做这件事。
<script>
var ul = document.querySelector('ul');
var input = document.getElementById('sect');
var head = document.querySelector('#head');
function getInput()
ul.innerHTML = ul.innerHTML + "<li>"+input.value+"</li> <hr>";
UpdateListener();
function UpdateListener()
var li = document.querySelectorAll('li');
var total = document.querySelectorAll('li').length;
for(let i=0 ; i< total ; i++)
li[i].addEventListener('click',() =>
head.innerHTML = li[i].innerHTML
);
UpdateListener();
</script>
【讨论】：
【参考方案2】：你可以试试这样的
var ul = document.querySelector('ul');
var input = document.getElementById('sect');
var head = document.querySelector('#head');
function getInput()
ul.innerHTML = ul.innerHTML + "<li>" + input.value + "</li> <hr>";
var li = document.querySelectorAll('li');
var total = document.querySelectorAll('li').length;
for (let i = 0; i < total; i++)
li[i].addEventListener('click', () =>
head.innerHTML = li[i].innerHTML
);
var li = document.querySelectorAll('li');
var total = document.querySelectorAll('li').length;
for (let i = 0; i < total; i++)
li[i].addEventListener('click', () =>
head.innerHTML = li[i].innerHTML
);
在您修改 ul.innerHTML 后，它会在其中添加所有侦听器。这是必要的，因为您基本上是在没有事件侦听器的情况下复制 lis。
但是你可以做这样的事情，它不会替换lis，而是只添加最新的。
var ul = document.querySelector('ul');
var input = document.getElementById('sect');
var head = document.querySelector('#head');
function getInput()
// named it createdLi to avoid confusion with other variable named li
var createdLi = document.createElement('li');
createdLi.innerHTML = input.value;
var hr = document.createElement('hr');
ul.appendChild(createdLi);
ul.appendChild(hr);
createdLi.addEventListener('click', (e) =>
head.innerHTML = e.target.innerHTML
)
;
var li = document.querySelectorAll('li');
var total = li.length;
for (let i = 0; i < total; i += 1)
li[i].addEventListener('click', () =>
head.innerHTML = li[i].innerHTML
)
【讨论】：
【参考方案3】：更有效的方法是将一个单击处理程序附加到ul，而不是将单独的事件处理程序附加到每个单独的li 元素。这样做的好处不仅是更好的内存效率，而且您还可以让处理程序免费为新插入的li 元素工作。您只需要在点击处理程序中添加更多逻辑来识别被点击的特定li。
ul.addEventListener('click', ( target ) =>
if (target.tagName === 'LI')
head.innerHTML = target.innerHTML;
, false);
【讨论】：
以上是关于当我更新我的列表时，它没有在后端更新列表的数量仍然相同，为啥？的主要内容，如果未能解决你的问题，请参考以下文章