javascript - 如果另一个元素不存在或不可见，如何隐藏一个元素？

Question

我的网站上有一些用于分享的社交按钮 (addthis)，我在按钮上方添加了一些文本，并用箭头指向它们，简单地说“分享这个!”

有些人使用 adblock 并设置隐藏社交按钮。这些人不会看到按钮，但仍会看到文本“分享这个!”。

如何制作“分享这个!”对于那些看不到社交按钮的人来说，文本会消失吗？有没有办法检查用户是否存在按钮，然后基于此显示/隐藏其他元素？ (除了检查 display:none，除非那是 adblock 用来隐藏元素的东西？？？我不知道。)

我做了一个简单的 fiddle ，所以你可以明白我的意思。我只是从社交插件中提取了一些代码来显示 Facebook 图标。

https://jsfiddle.net/bsuup9vf/6/

<div class="addthis_responsive_sharing"> <!-- This line initiates the plugin to generate the rest of the code -->
  <div id="share-this"> <!-- I want to hide this div only if the plugin is blocked or if it's elements aren't visible on the screen for some other reason --> 
    <div class="share-text">Share this!</div> 
    <span class="share-arrow right-arrow" style="font-size:24px;">&#10553;</span>
  </div>
  <!-- This is the parent div for the actual social buttons-->
  <div id="atrsb" class="at-resp-share-element addthis_32x32_style at-mobile addthis-smartlayers addthis-animated at4-show">
    <!-- Facebook - I pulled this from the live code just to display the FB icon -->
    <span class="at-icon-wrapper" style="background-color: rgb(59, 89, 152);">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" title="Facebook" alt="Facebook" class="at-icon at-icon-facebook" style="fill: rgb(255, 255, 255);">
        <g>
          <path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd">
          </path>
        </g>
      </svg>
    </span> <!-- /.Facebook -->

  </div> <!-- /.atrsb -->
</div> <!-- /.addthis_responsive_sharing>

抱歉，如果之前有人问过类似的问题。

谢谢大家的回答!

Answer 1

如果广告拦截器实际上从您的代码中删除了这些元素，你可以用 JQuery 检查它们是否存在，如果不存在，你可以隐藏你想要的元素:)

编辑:由于我们已经知道 adblocker 会使元素从页面中完全消失，您可以尝试以下代码:

var elements = $('#atrsb');
if (elements.length === 0) {
    $('#share-this').hide();
}