通過點擊沒有父標記隱藏任何元素（當我粘貼JQuery代碼並單擊它應該隱藏的元素）

Question

如果我點擊事件，元素應該隱藏在網站的任何位置。如果我通過單擊元素將此代碼粘貼到任何網站中，它應該隱藏起來就像<div>標籤<p>更多標籤 條件它不依賴於元素的父項。

例子：

jQuery(document).ready(function() { 
$(this).click(function(){ 
     $(this).hide(); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section id='app-demo'> 
      <div class="everything-but-toolbar"> 
      <div class="animation-element-panel"></div> 
      <div class="headlines"> 
       <h2>Mockingbird</h2> 
       <h3>s 

       </h3> 
       <h3> 

       </h3> 
       <span class="animation-cursor non-animating"></span> 
       <a class="try-it" href=/try><span class="arrow">Try creating wireframes for free<span></a> 
      </div> 

      <div class="animation-pointer"></div> 
      <div class="animation-grabby-hand-open"></div> 
      <div class="animation-grabby-hand-grabbing"></div> 
      <div class="animation-welcome-text"> 
       <span>Welcome</span> 
      </div> 
      </div> 
      <div class="animation-toolbar"> 
      <div></div> 
      </div> 
    </section> 
    <section id='tagline'> 
     <h1> 
     Mock up an application and show what's important: 
     </h1> 
     <p> 
     <span>the idea</span>, <span>the information</span>, <span>the interaction.</span> 
     </p> 
    </section> 
    <section id='features'> 
     <div> 
     <img class="circle-1" alt="Create mockups with drag and drop" src="/static/images/homepage-circle-1.png"></img> 
     <h2>Mock up your idea fast</h2> 
     <p> 
      Drag and drop UI elements to the page, then rearrange and resize. Go from idea to mockup in minutes. 
     </p> 
     </div> 
     <div> 
     <img class="circle-2" alt="Add multiple pages to your mockup" src="/static/images/homepage-circle-2.png"></img> 
     <h2>Link and click between pages</h2> 
     <p> 
      Link multiple mockups together and preview them interactively to get a feel for the flow of your application. 
     </p> 
     </div> 
     <div> 
     <img class="circle-3" alt="Share your mockup with collaborators" src="/static/images/homepage-circle-3.png"></img> 
     <h2>Collaborate live</h2> 
     <p> 
      Share a link, and clients and teammates can edit wireframes with you in real time. No more emailing images back and forth. 
     </p> 
     </div> 
    </section> 



<footer> 
    <div id='try-it'> 

      <a class='try-it' href="/try">Try it for free</a> or 
      <a class='log-in' href=/login>log in</a> 

    </div> 

    <nav> 
     <a href="/pricing" ><span>Pricing</span></a> 
     <a href="/privacy" ><span>Privacy</span></a> 
     <a href="/terms" ><span>Terms</span></a> 
     <a href="/help" ><span>Help</span></a> 

    </nav> 

如果我點擊頁面的特定元素應該被隱藏的任何地方。

我試過使用它，但沒有奏效。

Answer 1

這裏$(this)表示window您點擊window並試圖隱藏window。您需要點擊body中的元素並隱藏它們。

$(function() { 
    $("body").children().click(function() { 
    $(this).hide(); 
    }); 
});