javascript jQuery新手，需要在事件期间追加内容的帮助

目前，我正在尝试创建一个按钮，当单击它时，它会更新一个'feed' div。我希望它创建三个元素：一个tweet(<div>)、一个message(<p>)和一个username(<p>)，然后，我希望它将消息和用户名都附加到tweet div，再将tweet div附加到feed div。
这是我现在拥有的事件处理程序：

/* edit note: what is $button???? */
$button.on('click', function() {
  $feed.empty();
  for (var i = tweet.length - 1; i > 0; i--) {
    var user = tweet[i];
    console.log(user);
    var $tweet = $('<div class="tweet"></div>');
    var $message = $('<p class="message"></p>');
    var $username = $('<p class="username"></p');
    console.log(user.message);
    $message.text(user.message);
    $message.appendTo($tweet);
    $tweet.text('@' + $message);
    $tweet.appendTo($feed);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Need more HMML here!</div>

当我单击按钮时，我得到'@ [object Object]'。
我想知道如何从数据结构中获取文本，以便正确地呈现在"提要"上。
数据结构的格式如下：

{
user: 'douglascalhoun', 
message: ' installed my future ', 
createdAt: Wed Feb 15 2023 15:01:02 GMT-0600 (Central Standard Time), 
profilePhotoURL: './assets/img/user-3.png'
}

我想我明白你的意思了。这里我设置了一个假的tweet线程，并在事件处理程序中使用它。我添加了一些CSS，只是为了让视觉清晰。

// setup a JavaScript object with date fixed to an actual date
// well this is not great: Wed Feb 15 2023 15: 01: 02 GMT - 0600(Central Standard Time),

// setup fake tweets object: I just set up for the example since the question was about the jQuery part.
const baseDate = new Date("2023-02-15T15:01:02.000+06:00");
const bsec = baseDate.getSeconds();
const sample = [{
  user: 'douglascalhoun',
  message: ' installed my future ',
  createdAt: new Date(baseDate.setSeconds(bsec + 20)),
  profilePhotoURL: './assets/img/user-3.png'
}, {
  user: 'willieb',
  message: 'Ate my bananna',
  createdAt: new Date(baseDate.setSeconds(bsec + 45)),
  profilePhotoURL: './assets/img/user-3.png'
}, {
  user: 'charliewoods',
  message: 'Need more input',
  createdAt: new Date(baseDate.setSeconds(bsec + 16)),
  profilePhotoURL: './assets/img/user-3.png'
}].sort((a, b) => b.createdAt - a.createdAt);
//console.log(sample);
const $button = $('.add-more');
const $feed = $('.feed-me');

$button.on('click', function() {
  // assumes we want a new clean feed each time
  $feed.empty();
  const tweet = sample;
  //console.log(tweet,tweet.length);
  const startat = tweet.length;
  //console.log(startat,tweet[0]);
  for (let i = startat; !!i; i--) {
    const userTweet = tweet[i - 1];
    //console.log(i-1,userTweet);
    // create three objects
    const $tweet = $('<div class="tweet"></div>');
    const $message = $('<p class="message"></p>');
    const $username = $('<p class="username"></p');
    // add text to the message and username objects
    $message.text(userTweet.message);
    $username.text(userTweet.user);
    // append the message to the tweet object
    $message.appendTo($tweet);
    //put this text at the start of the username object
    $username.prepend('@');
    // add the user to the start of the tweet and append it to the fee;
    $tweet.prepend($username);
    $tweet.appendTo($feed);
  }
});

.container {
  display: grid;
  place-items: center;
}
 .tweet{
 display: flex;
 
}

.tweet {
  border: solid 1px lime;
}

.username {
  font-size: 1.5rem;
  font-family: sans-serif;
  border: solid blue 1px;
}

.message {
  border: cyan 1px solid;
  padding: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button type="button" class="add-more">Add More</button>
  <div class="feed-me">empty</div>
</div>

第二个例子是为每一个新的"批" tweet点击一次DOM并删除评论。我更新了datetime来模拟新的tweet，并在末尾添加了一个格式化的时间来说明删除超过"容量"值的tweet--所以在这个例子中，我们一次只显示7条。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

javascript jQuery新手，需要在事件期间追加内容的帮助

1条答案

相关问题

热门标签

最新问答