纯js循环添加dom html并动态绑定传参onclick事件

最新推荐文章于 2022-11-07 14:15:21 发布

iteye_13003

最新推荐文章于 2022-11-07 14:15:21 发布

阅读量2.6k

点赞数

分类专栏： js 文章标签：乔乐共享纵观千象每天进步一点点学习永无止境纯js

本文链接：https://blog.csdn.net/iteye_13003/article/details/82646840

版权

js 专栏收录该内容

123 篇文章 1 订阅

订阅专栏

// js loop load dom
for (var k in data) {
	var v = data[k];
	detailTemplate = detailTemplate.cloneNode(true);

	var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0];
	userInfoObj.getElementsByClassName('name')[0].innerText = v.author;
	userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar;
	userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost;

	var titleObj = detailTemplate.getElementsByClassName('title')[0];
	titleObj.innerText = v.subject;

	var commentHtml = '';
	if (v.postlist.length > 0) {
	  for (var j in v.postlist) {
	    var vv = v.postlist[j];
	    commentHtml += '<div class="line"><i class="icon icon-quote"></i><span class="desc">' + vv.message + '</span></div>';
	  }
	}
	var commentObj = detailTemplate.getElementsByClassName('comment')[0];
	commentObj.innerHTML = commentHtml;

	var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0];
	extInfoObj.getElementsByClassName('from')[0].innerText = v.fname;
	extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views;

// 动态绑定click事件并传参
	(function(v) {
	  userInfoObj.onclick = function() {
	    loadPage('u', v.authorid);
	  };
	  titleObj.onclick = commentObj.onclick = function() {
	    loadPage('t', v.tid);
	  };
	  extInfoObj.onclick = function() {
	    loadPage('f', v.fid);
	  };
	})(v);

	postListObj.appendChild(detailTemplate);
}