如何隐藏一个元素,如果另一个元素没有't存在还是不可见
How to hide an element if another element doesn't exist or is not visible?
我的网站上有一些社交按钮可以分享(addthis(,我在按钮上方添加了一些文本,箭头指向它们,简单地说"分享这个!">
有些人使用广告块,并有一个隐藏社交按钮的设置。这些人看不到按钮,但仍然会看到文本"分享这个!"。
对于那些看不到社交按钮的人,我该如何让"分享这个!"文本消失?有没有办法检查用户的按钮是否存在,然后在此基础上显示/隐藏其他元素?(除了检查显示:没有,除非那是广告块用来隐藏元素的东西???我不知道。(
我做了一把简单的小提琴,这样你就能明白我的意思。我刚刚从社交插件中提取了一些代码来显示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;">⤹</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>
如果以前有人问过类似的问题,我很抱歉。
谢谢大家的回答!
如果广告拦截程序实际上正在从代码中删除这些项,您可以使用JQuery检查它们是否存在,如果不存在,您可以隐藏您想要的元素:(
编辑:由于我们已经知道adblocker使元素从页面上完全消失,您可以尝试以下代码:
var elements = $('#atrsb');
if (elements.length === 0) {
$('#share-this').hide();
}
您可以使用jQuery来查找元素,并检查DOM元素是否存在and是否将其display
值设置为`none`
var obj = $('.at-icon-wrapper); // Edit to the class or ID that will be hidden/not removed by adblocker
if(obj.length <= 0 || obj.css('display') != "none") // It's not there!
$('#share-this').css('display', 'none')
您可以检查页面上是否存在共享元素,如果没有,则隐藏共享文本。如果adblock真的删除了这些元素,这将起作用。
var shareEle = document.getElementsByClassName('at-resp-share-element');
if(shareEle.length === 0){
var shareText = document.getElementsByClassName('share-text');
for(var i = 0; i < shareText.length; i++){
shareText[i].style.display = 'none';
}
}
相关文章:
- 将事件侦听器添加到文档,而不是签入元素存在,然后添加事件侦听器
- Ajax:只在元素存在的情况下调用Ajax
- 执行 If 语句,仅当元素存在时
- 在所述元素存在之前,不要运行其余代码
- 等到元素存在,循环,然后存储在变量中
- 如果元素存在,如何使用 .after() 作为 .html()
- 如何在量角器中为元素存在或不存在创建条件
- 有没有办法知道特定元素存在于其他 html 页面中
- 实现等待元素存在 N 秒,然后使用 JavaScript 和 jQuery lib 与元素交互
- 如何仅在li元素存在的情况下向pre元素添加id
- 当元素存在时,将鼠标移到需要X/Y偏移的位置
- 如果具有给定ID的元素存在,那么document.getelementbyid('ID')方法将返回nu
- AngularJS ng类,如果元素存在
- 如何等待,直到一个元素存在dojo
- jQuery-只听滚动,如果某些元素存在
- 如何等待页面加载或元素存在时,将量角器用于非角度页面
- 当没有元素存在时,拖放不起作用
- 让Javascript等待HTML元素存在
- 骨干事件未启动,没有错误且元素存在
- 元素存在于文档中