如何隱藏元素，如果另一個元素不存在或不可見？

我有一些社交按鈕用於在我的網站上分享（addthis），我在按鈕上方添加了一些文本，箭頭指向他們只是說「分享這個！」如何隱藏元素，如果另一個元素不存在或不可見？

有些人使用adblock，並有一個隱藏社交按鈕的設置。這些人不會看到按鈕，但仍會看到文字「分享這個！」。

我該如何製作「分享這個！」對於那些無法看到社交按鈕的人，文字消失了嗎？有沒有辦法檢查用戶是否存在這些按鈕，然後基於此顯示/隱藏其他元素？（除了檢查顯示：沒有，除非這是adblock用來隱藏元素???我不知道。）

我做了一個簡單的小提琴，所以你可以看到我的意思。我只是從社交插件中提取了一些代碼來顯示Facebook圖標。

<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>

很抱歉，如果像這樣類似的問題已經被問過。

謝謝大家的答案！

來源

2016-08-05 Quaren

可能的複製[如何檢測Adblock的在我的網站？]（http://stackoverflow.com/questions/4869154/how-to-detect-adblock-on-my-website） –

那麼你檢查addblock如何隱藏圖標？它只是沒有加載它，或者它加載它然後隱藏它（顯示：無）？ –

你嘗試過什麼嗎？你的工作在哪裏？您是否在尋找複製粘貼的答案？ – hungerstar

如果adblocker實際上是去除你的代碼，這些項目你可以使用jQuery檢查如果存在的話，如果他們不，你可以隱藏你想:)

編輯元素：因爲我們已經知道，adblocker使得元素完全從頁面中消失，你可以試試這個代碼：

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

來源

2016-08-05 13:42:58

是的，我認爲jQuery將不得不被使用。我不是很熟悉，但不知道從哪裏開始D： – Quaren

好吧，我現在編輯我的答案，試圖幫助你，但我真的不知道adblocker的行爲如何。 –

您能否檢查一下是否刪除了這些元素，或者只是隱藏它們？ –

您可以檢查，看看你的頁面上，共享的元素，並且隱藏共享文本，如果沒有找到。如果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'; 
    } 
}

來源

2016-08-05 13:49:35 IrkenInvader

謝謝！我認爲這是我正在尋找的！我會放棄它。 – Quaren

您可以使用jQuery找到元素，並檢查DOM元素，甚至存在並沒有它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')

來源

2016-08-05 13:57:23

如何隱藏元素，如果另一個元素不存在或不可見？

回答

相關問題