Question

我知道这里有一些帖子，但没有一个完全适合我正在寻找的东西。

我正在创建一个简单版本的twitter。我的目标恰恰是点击用户的句柄（用户链接），然后显示他们的所有推文。我使用html的onclick并传入一个函数，但会显示：@ [object Object]，[object Object]：[object Object]，[object Object] [object Object]，[object对象

这些推文全部消失，但现在没有推文显示。看起来像在js控制台中我得到了正确的对象（人物的推文），但他们只是没有正确地在页面上显示。你知道这里需要发生什么吗？任何正确方向的帮助都会很棒。

这是我的相关代码：

  var tweetCount;
  var newCount;

  var initialTweets = function() {
    tweetCount = streams.home.length;
    for(var i = 0; i < tweetCount; i++) {
      var tweet = streams.home[i];
      displayTweet(tweet);
    }
  };

  var extraTweets = function() {
    newCount = streams.home.length;
    for(var i = tweetCount; i < newCount; i++) {
      var tweet = streams.home[i];
      displayTweet(tweet);
    }
    tweetCount = newCount;
  };


  var displayTweet = function(tweet) {
    var $tweet = $('<div></div>');
    var userLink = "<a href='#' onclick='displayUserTweets("+ tweet.user +")'>" + tweet.user + "</a>";
    $tweet.html('@' + userLink + ': ' + tweet.message + ' ' + tweet.created_at);
    $('#tweetContainer').prepend($tweet);
  };

  var displayUserTweets = function(user) {
    $('#tweetContainer').html('<div></div>');
    var $userTweets = $('<div></div>');
    var userTweets = streams.users[user];
    $userTweets.html('@' + userTweets.user + ': ' + userTweets.message + ' ' + userTweets.created_at);
    $('#tweetContainer').prepend($userTweets);
  };

  initialTweets();

  $(document).ready(function(){
    $('button').on('click', function() {
      extraTweets()
    });
  });

Answer 1

您在此处将用户作为onclick处理程序传递，应该是javascript函数。

var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";

“tweet.user”它应该是javascript函数名，如下所示：

function showUserTweets(username) {
    // write you logic here to get the user tweets by using his username;
}

因此您的代码将如下所示：

var userLink = "<a href='#' onclick='showUserTweets(\""+ tweet.user +"\")'>" + tweet.user + "</a>";

注意：你tweet.user必须返回String值。对于对象，您已使用JSON.strigify(object)方法将对象转换为JSON字符串。

希望它可以帮到你！

Answer 2

因为我发现你将变量传递给了onclick。这不是一个有效的方法。这样tweet.user不是一个有效的方法。

var displayTweet = function(tweet) {
    var $tweet = $('<div></div>');
    var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";

    $tweet.html('@' + userLink + ': ' + tweet.message + ' ' + tweet.created_at);
    $('#tweetContainer').prepend($tweet);

  };

我在写这个解决方案：首先创建一个函数

  function yourFunction(){

   // do your stuff
    }

然后你可以使用以下其中一个来替换你的行：

var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";

到这个

var userLink = "<a href='javascript:void(0);' onclick='yourFunction('+"'"+ tweet.user +"'"+")'>" + tweet.user + "</a>";

OR

var userLink = "<a href='javascript:yourFunction('+"'"+tweet.user+"'"+');'

并删除这些功能

传入函数时，html onclick无法正常工作

2 个答案: