Want to existing li element binding a click event, click Generate new li element, and the new li element must also have a click event
// can not be used for loop to each li li bind click event because the new generation of the back so there is no click event
// i.e., use the following method of obtaining dom element having real-time does not give li clcik binding events of these two methods is newly generated in real time HTMLCollection not directly forEach loop
the let ali1 = oul.getElementsByClassName ( 'li')
the let ali2 = oul.getElementsByTagName ( 'li')
// not in real time but NodeList can be directly connected using forEach
the let AlI3 document.querySelectorAll = ( '. Li')
the let ali4 = document.getElementsByName ( 'Li')
Method: use the event broker
// event broker
commmentUl.onclick = function (E) {
// the console.log (e.target)
the let e.target target =
IF (target.tagName.toLowerCase () == 'A') {// reply box appears hit reply
form = target.parentNode.lastElementChild
the console.log (form)
formDisplay = the getStyle (form, 'the display')
IF (formDisplay == 'none') {
form.style.display = 'block '
form.children [0] .setAttribute (' The autofocus', to true)
} the else {
form.style.display = 'none'
}
}
if(target.type=='reset'){//取消按钮
target.parentNode.style.display = 'none'
}
if(target.type=='button'){//回复按钮 发表评论
let content = target.parentNode.children[0].value
let news_id = target.parentNode.getAttribute('news-id')
let parent_id = target.parentNode.getAttribute('comment-id')
let that = target
if (!content) {
message.showError('评论内容不能为空')
return
}
let data = {
content,
news_id,
parent_id
}
$.ajax({
url: '/news/' + news_id + '/comments/',
type: 'POST',
data: JSON.stringify(data)
})
.success(function (res) {
// console.log(this)
if (res.errno == '0') {
// console.log(res.data)
let li = `
<li class="comment-item">
<div class="comment-info clearfix">
<img src="/static/images/avatar.jpeg" alt="avatar" class="comment-avatar">
<span class="comment-user">${ res.data.author }</span>
</div>
<div class="comment-content">${ res.data.content }</div>
<div class="parent_comment_text">
<div class="parent_username">${ res.data.parent.author }</div>
<br/>
<div class="parent_content_text">
${ res.data.parent.content }
</div>
</div>
<div class="comment_time left_float">${ res.data.update_time }</div>
<a href="javascript:;" class="reply_a_tag right_float">回复</a>
<form class="reply_form left_float" comment-id="${ res.data.comment_id }"
news-id="${ res.data.news_id }">
<textarea class="reply_input"></textarea>
<input type="button" value="回复" class="reply_btn right_float">
<input type="reset" name="" value="取消" class="reply_cancel right_float">
</form>
</li>`
$(commmentUl).prepend(li)
that.parentNode.style.display = 'none'
} else if (res.errno == '4101') {
message.showError('用户未登录')
setTimeout(function () {
window.location.href = '/user/login/'
}, 1000)
}
})
.error(function () {
message.showError('服务器错误，请重试')
})
}
}
for循环过程中增加新元素：
let arr=[1,2,3]
for(let i =0;i<arr.length;i++){
if(i==0)arr[0+3]=4
console.log('本次循环i的值:'+i)
}
本次循环i的值:0
本次循环i的值:1
本次循环i的值:2
本次循环i的值:3
let arr=[1,2,3]
for(let i =0,len=arr.length;i<len;i++){
if(i==0)arr[0+3]=4
console.log('本次循环i的值:'+i)
}
//在循环初始化时候 len=3,即使在循环过程中arr长度改变，len也不会变了
本次循环i的值:0
本次循环i的值:1
本次循环i的值:2
for in循环
let obj = {name:'wl',age:21}
for(let i in obj){
if(i == 'name')obj['sex'] = 'man'
console.log(obj[i])
}
'wl'
21
//不会输出'man' 因为for in 循环在循环开始前计算obj一次 之后即使在循环过程中obj新增也不会遍历到新增的
//如果在循环过程中删除已有的未遍历的属性 也不会遍历到