Question

我正在开发一个玩具项目 - 一个推特克隆。

推文是从js文件中随机生成的。

其中一个要求是，当用户点击用户名时，它应该只显示该用户推文的Feed。目前，当我点击用户名时，Feed会清除，但过滤后的Feed不会更新。在过去的两个小时里，我一直难过，试图让它发挥作用。

<body>
   <div class="nav">
      <div class="title">
         <h1> <i class="fa fa-twitter" aria-hidden="true"></i>&nbsp;Twittler</h1>
      </div>
   </div>
   <div class="containter">
      <h2>Tweets</h2>
      <ul class="tweets"></ul>
   </div>
   <script>
      $(document).ready(function(){
        // var $body = $('body');
        // $body.html('');
        function populate(){
          $('.tweetClass').remove();
          for(var i = 0; i< streams.home.length;i++){
            var tweet = streams.home[i];
            var readableTime = moment(tweet.created_at).fromNow()
            var $tweet = $('<li class="tweetClass"></li>');
            $tweet.html('<a class="filterByUsername"> @' + tweet.user + ':</a> ' + '<p>' + tweet.message + '</p> <p id="time"> tweeted at: ' + readableTime + '</p>');
            $tweet.prependTo($('.tweets'));
          }
        }

      function userPopulate(input){
          $('.tweetClass').remove();
          for(var i = 0; i < streams.home.length; i++){
            var tweet = streams.home[i];
            var $tweet = $('<li class="tweetClass"></li>');
            if(input === '@'+tweet.user){
              $tweet.html('@' + tweet.user + ': <p>' + tweet.message + '</p> <p id="time"> tweeted at: ' + readableTime + '</p>');
              $tweet.appendTo($('.tweets')
            }
          }
      };

        var refreshSwitch = true;
        populate();
        setInterval(function(){
          if(refreshSwitch === true){
            populate();
          }
        }, 3000);

        $('.filterByUsername').on('click', function(){
          refreshSwitch = false;
          userPopulate($(this).html());
        });

        $('.title').on('click', function(){
          refreshSwitch = true;
          populate();
        });
      });
   </script>
</body>

Answer 1

您的代码存在几个小问题 - 您的A标记的内容已被排除＆＃34;：＆＃34;和一个空格，你错过了readTime的声明。同时关闭$tweet.appendTo($('.tweets')

上的括号

以下是工作示例：

＆＃13;

 $(document).ready(function(){
        var streams = {'home':[
           {'user':'test1','created_at':'2017-12-19 10:00:00','message':'hi there'},
           {'user':'test1','created_at':'2017-12-19 11:00:00','message':'hi there'},
           {'user':'test2','created_at':'2017-12-19 12:00:00','message':'hi there'},
           {'user':'test1','created_at':'2017-12-19 13:00:00','message':'hi there 2'},
           {'user':'test3','created_at':'2017-12-19 13:00:00','message':'hi there 3'}
        ]}
        
        function populate(){
          $('.tweetClass').remove();
          for(var i = 0; i< streams.home.length;i++){
            var tweet = streams.home[i];
            var readableTime = moment(tweet.created_at).fromNow()
            var $tweet = $('<li class="tweetClass"></li>');
            $tweet.html('<a class="filterByUsername">@' + tweet.user + '</a>: ' + '<p>' + tweet.message + '</p> <p id="time"> tweeted at: ' + readableTime + '</p>');
            $tweet.prependTo($('.tweets'));
          }
        }

      function userPopulate(input){
          $('.tweetClass').remove();
          for(var i = 0; i < streams.home.length; i++){
            var tweet = streams.home[i];
            var readableTime = moment(tweet.created_at).fromNow()
            var $tweet = $('<li class="tweetClass"></li>');
             
            if(input === '@'+tweet.user){
              $tweet.html('@' + tweet.user + ': <p>' + tweet.message + '</p> <p id="time"> tweeted at: ' + readableTime + '</p>');
              $tweet.appendTo($('.tweets'))
            }
          }
      };

        var refreshSwitch = true;
        populate();
        setInterval(function(){
          if(refreshSwitch === true){
            populate();
          }
        }, 3000);

        $('.filterByUsername').on('click', function(){
          refreshSwitch = false;
          userPopulate($(this).html());
        });

        $('.title').on('click', function(){
          refreshSwitch = true;
          populate();
        });
      });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<body>
   <div class="nav">
      <div class="title">
         <h1> <i class="fa fa-twitter" aria-hidden="true"></i>&nbsp;Twittler</h1>
      </div>
   </div>
   <div class="containter">
      <h2>Tweets</h2>
      <ul class="tweets"></ul>
   </div>
   
</body>

＆＃13;

点击过滤列表/视图

1 个答案: