Question

因此，我正在创建一个Twitter克隆，并且无法隐藏特定类的所有元素。当用户单击用户名时，将完成该操作，而我试图隐藏所有单击的父母，但没有相同的类。

使用下面的当前代码，我可以将所有被单击的父母与被单击的同一个类别隐藏起来，但是当我尝试隐藏每个与“不相同的类别”在一起的父母时，它最终隐藏了所有

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
        <a href = index.html>Twiddler</a>
        <button id='newTweets'> Show New Twidds</button>
        <div class="btn-group">
          <button class="button">News</button>
          <button class="button">Trending</button>
          <button class="button">About</button>
          <button class="button">Contact Us</button>
        </div>
      <div></br></div>
    </header>

    <div id="allTweets"></div>
    <h2></h2>
    <script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
        <a href = index.html>Twiddler</a>
        <button id='newTweets'> Show New Twidds</button>
        <div class="btn-group">
          <button class="button">News</button>
          <button class="button">Trending</button>
          <button class="button">About</button>
          <button class="button">Contact Us</button>
        </div>
      <div></br></div>
    </header>

    <div id="allTweets"></div>
    <h2></h2>
    <script>
      $(document).ready(function(){


        var $body = $('body');
        var $allTweets = $('#allTweets');
        var index = streams.home.length - 1;

   // SHOW INITIAL TWEETS ON PAGE
        for (var i=0; i<10; i++) {
          var tweet = streams.home[index];
          var message = tweet.message;
          var user = tweet.user;
          var timestamp = tweet.created_at;
          var userID = user;
          $tweet = $('<div class="tweets ' + userID + '"><div class="user">@' + user + '</div><div class="message"></br>' + message + '</div><div class="date">' + timestamp + '</div></div>');
          $tweet.appendTo('#allTweets');
          index--;
        };

         // WHEN BUTTON IS CLICKED SHOW NEW TWEET 

        $('#newTweets').click(function () {
          index = streams.home.length-1;
          for (var i=0; i<10; i++) {
            var tweet = streams.home[index];
            var message = tweet.message;
            var user = tweet.user;
            var timestamp = tweet.created_at;
            var userID = user;
            $tweet = $('<div class="tweets ' + userID + '"><div class="user">@' + user + '</div><div class="message"></br>' + message + '</div><div class="date">' + timestamp + '</div></div>');
            $tweet.prependTo('#allTweets');
            index--;
          };
        });

      // HIDE TWEETS ON CLICK USERNAME 

        $(document.body).on('click', '.user', function(){
          var ID = $(this).parent().attr('class');
          var newID = ID.split(' ');
          //$('.'+ newID[1]).hide();     //THIS WORKS
          //$('div').not($('.' + newID[1])).hide();      //THIS HIDES EVERYTHING
      });
      });
    </script>
  </body>
</html>

使用某个类显示所有<div>并使用Jquery隐藏其他<divs>

0 个答案: