使用 jQuery 从类中获取特定用户数据

Question

 $(document).ready(function() { /* var $body = $('body'); $body.html(''); */ //current feed var index = streams.home.length - 1; while (index >= 0) { var tweet = streams.home[index]; //need to separate tweet message so only user class can be used for click event var $tweet = $('<div class=tweet></div>'); var $user = $('<p id=users></p>'); var $message = $('<p id=message></p>'); var $time = $('<p id=time></p>'); $time.text(tweet.created_at).appendTo($tweet); $user.text('@' + tweet.user + ': ').appendTo($tweet); $message.text(tweet.message).appendTo($tweet); $tweet.appendTo($('#tweets')); index -= 1; } //click event for new tweets $('button').click(function() { //pull a random tweet from streams.home which is an array of all tweets //can reuse code from current feed var tweet = streams.home[Math.floor(Math.random() * streams.home.length)]; var $tweet = $('<div class=tweet></div>'); var $user = $('<p id=users></p>'); var $message = $('<p id=message></p>'); var $time = $('<p id=time></p>'); $time.text(tweet.created_at).appendTo($tweet); $user.text('@' + tweet.user + ': ').appendTo($tweet); $message.text(tweet.message).appendTo($tweet); $tweet.appendTo($('#tweets')); }) //be able to view user profile //click event on user data only $('#tweets').on('click', '#users', function() { $('.container').hide(); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <h1> Twiddler </h1> <h3> Social Feed </h3> </header> <div class='container'> <section> <button id='home'> Home </button> <section class='main'> <p id='tweets'></p> <button id='new'>Push</button> </section> </section> </div> <div class='userfeed'> </div>

作为一个项目，我正在让 Twitter 看起来像一个网站。 我正在开发一个功能来查看特定用户的历史记录。 基本上点击用户的名字会显示他们的历史并隐藏所有其他用户。 我不确定如何处理并获取特定用户的数据。 我应该使用什么样的 jQuery 函数来完成这个任务？

Answer 1

• 要过滤数组，请使用 Array.prototype.filter()
• 为单个推文创建模板函数，返回所需的 HTML 标记
• 不要使用重复的 ID，而是使用类
• 单击检索data-user值并按user属性过滤对象数组

 const tweets = [ {created_at: "2020-03-14T08:15:30Z", user:"aaa", message:"Lorem aaa ipsum"}, {created_at: "2020-03-15T08:16:21Z", user:"bbb", message:"Lorem bbb ipsum"}, {created_at: "2020-03-16T08:17:45Z", user:"aaa", message:"Lorem aaa ipsum"}, {created_at: "2020-03-16T08:19:10Z", user:"ccc", message:"Lorem ccc ipsum"}, ]; const template_tweet = tweet => $("<div>", { class: "tweet", html: ` <span class="tweet-time">${new Date(tweet.created_at).toLocaleString()}</span> <a class="tweet-user" data-user="${tweet.user}">@${tweet.user}</a> <div class="tweet-message">${tweet.message}</div> `, }); const showTweets = (tweets, user) => { const tweetsFiltered = user ? tweets.filter(tweet => tweet.user === user) : tweets; $("#tweets").html(tweetsFiltered.map(template_tweet)); } showTweets(tweets); // Show all unfiltered $("#tweets").on('click', '[data-user]', function() { showTweets(tweets, this.dataset.user); // Show by user name });

 .tweet {padding: 10px;} .tweet-user {color:#08e; cursor:pointer;}

 <div id="tweets"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>