为什么我在重构 jQuery 代码时得到的是 [object Object] 而不是预期的 HTML？

Question

我正在尝试清理我的代码，我发现我的脚本中有许多类似于以下内容的片段：

$msg.html('<a href="#" data-userName=' + msg.user +
      ' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>' + '<span class="timestamp"> <b>&middot;</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>&middot;</b> ' + 
      jQuery.timeago(msg.created_at) +'</span>'); 
$msg.html($userProfile + $timeStamp + '</br>' + msg.message);

以使其更具可读性，但页面无法正确构建。相反，它显示类似 [Object][Object].

的内容

为什么会发生这种情况，我该如何解决这个错误？

Answer 1

您不能 "add" 两个 jQuery 对象在一起。您应该只是将 HTML 片段构建为字符串，然后将字符串连接在一起：

var userProfile = '<a href="#" data-userName=' + msg.user +
      ' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>';
var timeStamp = '<span class="timestamp"> <b>&middot;</b> ' + 
      jQuery.timeago(msg.created_at) +'</span>'; 
$msg.html(userProfile + timeStamp + '</br>' + msg.message);

就是说，如果您真的有兴趣清理它，您应该停止使用简单的字符串连接来构建您的 HTML。选择一个真正的模板库，如 Handlebars、HTMLBars、Jade 等

Answer 2

这是重构您的 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>&middot;</b>' + msg.created_at
});

var $p = $('<p>', {html: msg.message});

var $html = $a.add($span).add($('<br>')).add($p);

为什么我在重构 jQuery 代码时得到的是 [object Object] 而不是预期的 HTML？

Why am I getting [object Object] instead of my expected HTML when refactoring jQuery code?

javascript

jquery

refactoring