为什么在重构jQuery代码时我得到[对象对象]而不是我预期的HTML
Why am I getting [object Object] instead of my expected HTML when refactoring jQuery code?
我正在尝试清理我的代码,我在我的脚本中发现了许多类似于以下内容的代码片段:
$msg.html('<a href="#" data-userName=' + msg.user +
' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>' + '<span class="timestamp"> <b>·</b> ' +
jQuery.timeago(msg.created_at) +'</span></br>' +
msg.message);
我尝试做类似的事情
var $userProfile = $('<a href="#" data-userName=' + msg.user +
' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>');
var $timeStamp = $('<span class="timestamp"> <b>·</b> ' +
jQuery.timeago(msg.created_at) +'</span>');
$msg.html($userProfile + $timeStamp + '</br>' + msg.message);
以使其更具可读性,但随后页面无法正确构建。相反,它显示类似 [Object][Object]
.
为什么会发生这种情况,如何修复此错误?
这是重构 html 生成 jQuery 代码的清晰(不过很长)方法:
var $a = $('<a>', {
'href': '#',
'data-userName': msg.user,
'class': 'userName',
'html': '@' + msg.user
}).on('click', function() { showCurrUsersMsgs(this);});
var $span = $('<span>', {
'class': 'timestamp',
'html': '<b>·</b>' + msg.created_at
});
var $p = $('<p>', {html: msg.message});
var $html = $a.add($span).add($('<br>')).add($p);
你不能将两个jQuery对象"添加"在一起。您应该只是将HTML片段构建为字符串,然后将字符串连接在一起:
var userProfile = '<a href="#" data-userName=' + msg.user +
' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>';
var timeStamp = '<span class="timestamp"> <b>·</b> ' +
jQuery.timeago(msg.created_at) +'</span>';
$msg.html(userProfile + timeStamp + '</br>' + msg.message);
也就是说,如果你真的有兴趣清理它,你应该停止使用简单的字符串连接来构建你的HTML。选择一个真正的模板库,如Handlebars,HTMLBars,Jade等。
相关文章:
- 如何在HTML中显示服务器对象变量
- Html地图对象-点击地图获取id的一部分
- 当使用ajax并将html数据保存为对象时,收听浏览器返回按钮.好的或坏的
- 将GET请求(HTML字符串)转换为完整的DOM对象
- 确定javascript中的html表对象是否具有<colgroup>是否
- 枚举附加到文档的HTML对象的所有事件
- 从html锚元素传递窗口对象
- Don't将对象中的项附加到html中
- jQuery对象从html表中查询为两个一维数组,用于Chartist图表
- 重叠对象上的HTML画布事件
- 如何打开文件对象(HTML)并在谷歌应用程序脚本中解析它
- 在单击选项卡式项目时隐藏和创建另一个对象 - HTML CSS
- 对象 HTML 被输出而不是期望值
- 如何操作svg外来对象html文本包装和定位
- 如何打印对象html
- 什么是javascript中的对象html集合
- Knockout JS如何绑定可观察的对象html绑定
- 对象 HTML 我的第一个代码中的错误
- 如何在 React 中使用 JavaScript 模块对象(HTML + JS 嵌入)
- 嵌入对象HTML的高度