动态创建和 append 元素不工作

Question

我知道有很多类似的问题，但在下班或阅读后我无法弄清楚。 我的代码是：

var createTweet = function(tweet) {
  //Create elements

  var $profile = $('<img class="profile-photo" src="">');
  $profile.attr("src", tweet.profilePhotoURL);
  var $username = $('<div class="username"></div>');
  $username.text('@' + tweet.user);
  var $message = $('<div class="message"></div>');
  $message.text(tweet.message);
  $timeStamp = $('<div class="timestamp"></div>');
  var elapsedSecs = Math.floor(((new Date()).getTime() - tweet.created_at.getTime()) / 1000);
  if (elapsedSecs > 60) {
    var elapsedMins = Math.floor(elapsedSecs / 60)
    $timeStamp.text(elapsedMins + ' mins ago');
  } else {
    $timeStamp.text(elapsedSecs + ' secs ago');
  }
  $icons = $('<div class="icons"></div>');

  var $commentIcon = $('<img class="icon comment" src="./assets/icons/placeholder.png">');
  var $retweetIcon = $('<img class="icon retweet" src="./assets/icons/placeholder.png">');
  var $likeIcon = $('<img class="icon like" src="./assets/icons/placeholder.png">');
  var $shareIcon = $('<img class="icon share" src="./assets/icons/placeholder.png">');

  //Append to $icons

  $commentIcon.appendTo($icons);
  $retweetIcon.appendTo($icons);
  $likeIcon.appendTo($icons);
  $shareIcon.appendTo($icons);

  //Append to $tweet

  $profile.appendTo($tweet);
  $username.appendTo($tweet);
  $message.appendTo($tweet);
  $timeStamp.appendTo($tweet);
  $icons.appendTo($tweet);

};


var handleUpdateClick = function() {
  index = streams.home.length - 1;
  while (index > lastIndex) {
    var tweet = streams.home[index];
    var $tweet = $('<div class="tweet"></div>');
    createTweet(tweet);
    $tweet.prependTo($feed);
    index -= 1;
    lastIndex++;
  }
};

$("body").on("click", "button#update-feed", handleUpdateClick);

它没有正确显示，即使 $tweet 出现，在控制台中元素也没有正确显示。

它在浏览器中的样子：

这是在.on click之外工作的代码：

      var index = streams.home.length - 1;
      var lastIndex = 0;
      while(index >= 0){
        var tweet = streams.home[index];
        var $tweet = $('<div class="tweet"></div>');
        createTweet(tweet);
        $tweet.prependTo($feed);
        index -= 1;
        lastIndex++;
      };

Answer 1

$tweet是handleUpdateClick()中的一个局部变量。 您需要将其作为参数传递给createTweet() 。

var createTweet = function(tweet, $tweet) {
  //Create elements

  var $profile = $('<img class="profile-photo" src="">');
  $profile.attr("src", tweet.profilePhotoURL);
  var $username = $('<div class="username"></div>');
  $username.text('@' + tweet.user);
  var $message = $('<div class="message"></div>');
  $message.text(tweet.message);
  $timeStamp = $('<div class="timestamp"></div>');
  var elapsedSecs = Math.floor(((new Date()).getTime() - tweet.created_at.getTime()) / 1000);
  if (elapsedSecs > 60) {
    var elapsedMins = Math.floor(elapsedSecs / 60)
    $timeStamp.text(elapsedMins + ' mins ago');
  } else {
    $timeStamp.text(elapsedSecs + ' secs ago');
  }
  $icons = $('<div class="icons"></div>');

  var $commentIcon = $('<img class="icon comment" src="./assets/icons/placeholder.png">');
  var $retweetIcon = $('<img class="icon retweet" src="./assets/icons/placeholder.png">');
  var $likeIcon = $('<img class="icon like" src="./assets/icons/placeholder.png">');
  var $shareIcon = $('<img class="icon share" src="./assets/icons/placeholder.png">');

  //Append to $icons

  $commentIcon.appendTo($icons);
  $retweetIcon.appendTo($icons);
  $likeIcon.appendTo($icons);
  $shareIcon.appendTo($icons);

  //Append to $tweet

  $profile.appendTo($tweet);
  $username.appendTo($tweet);
  $message.appendTo($tweet);
  $timeStamp.appendTo($tweet);
  $icons.appendTo($tweet);

};


var handleUpdateClick = function() {
  index = streams.home.length - 1;
  while (index > lastIndex) {
    var tweet = streams.home[index];
    var $tweet = $('<div class="tweet"></div>');
    createTweet(tweet, $tweet);
    $tweet.prependTo($feed);
    index -= 1;
    lastIndex++;
  }
};

$("body").on("click", "button#update-feed", handleUpdateClick);

如果您没有收到未定义变量的错误，那一定是因为您还有一个名为$tweet的全局变量。 但这不是您在handleUpdateClick中分配的内容，因此您将新推文附加到错误的元素。