Javascript來分析一個div嗎？

所以我想我會得到一點Javascript練習，並在我的第一個Google Chrome擴展上工作。我做了一個擴展，當用戶點擊Facebook上的「Like」按鈕時，如果他們點擊的帖子超過了某個閾值，那麼它會提示他們確定他們的確想要點擊「贊」發帖（以防止偷偷摸摸時發生意外）。Javascript來分析一個div嗎？

我有基本的功能下降，其中，如果用戶點擊喜歡它會提示他們，以確保他們的意思打等，如果他們不意味着，他們可以在這一點上取消等。但是，現在我試圖增加檢測某篇文章是否屬於某個年齡段，以便在帖子過期時提示。

我什麼，我都馬上就設在這裏來源： https://github.com/mathur/StalkingCondom

從本質上講，Facebook的存儲該數據的時間戳，我想知道如何單從崗位訪問時間戳用戶在哪裏目前「喜歡」而不是頁面上的其他時間戳。

下面是我的代碼，當文件被加載運行：

$(document).ready(function(){ 
    $(".UFILikeLink").click(function(e) { 
     if (confirm("Are you sure you want to like this?")) { 
      // like was intended, continue with usual behavior 
     } 
     else { 
      // like was not intended, lets stop that like! 
      e.stopPropagation(); 
      e.preventDefault(); 
     } 
    }); 
});

時間戳存儲縮寫標籤之間象下面這樣：

<abbr data-utime="1421210082" data-shorten="1" class="_5ptz timestamp livetimestamp">10 mins</abbr>`

每一個崗位都有自己的div某些獨特的ID 。

基本上我需要換整個UFILikeLink點擊功能在if語句，其中如果日期是超過一定日期之前然後執行點擊功能吧？我將如何做到這一點，所以JavaScript只在一個獨特的div中找到時間戳？

是任何人都願意指出我在正確的方向？這甚至可行嗎？非常感謝您的參與！

來源

2015-01-14 rohan32

如果您有關於特定問題的具體問題，請將代碼發佈到此處而不是鏈接到現場。另外，我們不需要知道你的整個背後的故事。聽起來就像你想從時間戳中提取時間。是對的嗎？它在你所有的語言中都迷失了。如果這就是你所需要的，那就問問題，說出你正在談論的數據以及迄今爲止所嘗試的內容。 –

我試圖澄清它 - 這有幫助嗎？感謝您提供反饋！ – rohan32

我不確定你的JavaScript和頁面之間有什麼關係。但你在哪裏遇到麻煩？你無法選擇'abbr'元素嗎？或者你無法獲得'data-utime'的價值？或者是別的什麼？ –

首先：Facebook的時間軸得到通過AJAX請求更新，每次到達底部時間，因此增加一個監聽器$(".UFILikeLink")只會在最初的幾個鏈接（在開始加載）的工作。 如果您希望它適用於所有鏈接，則必須向<body>元素添加偵聽器。

因此，您將使用addEventListener('click', func(){...}, true)爲click事件添加偵聽器，並設置useCapture=true（最後一個參數）。將useCapture設置爲true，您可以在事件到達目標元素之前阻止它們，並在必要時停止它們。然後，在事件監聽器中，您將檢查單擊的元素是否具有類UFILikeButton，如果是，則繼續。

現在，寫下任何東西之前，你需要做一些更正考慮以下事實：

「喜歡」的文本，用戶單擊它實際上是一個<span>，並沒有階級「 UFILikeLink「，但其母公司。下面是一個類似的鏈接結構：
```
<a class="UFILikeLink" href="#" role="button" aria-live="polite" title="Like this" ...> 
    <span data-reactid=".27.1">Like</span> 
</a> 
```
你不知道究竟在<abbr>元素的位置，以便你需要尋找我噸：使用.parents(".userContentWrapper")你會發現後身容器，其中包含<abbr>元素，然後使用.find("abbr")，你終於會得到它。下面是完整的代碼：
```
var timestamp = +$(e.target).parents(".userContentWrapper").find("abbr").attr("data-utime"); 
```
^{* +（加）將字符串轉換爲數字}
如果用戶點擊「不像」，而不是「像」，你不應該顯示提示，所以要檢查是否包含在點擊的元素中的文本，這樣它是有用的：
```
$(e.target).text() == 'Unlike'; 
```
的Fac電子書時間戳記在秒，但JavaScript時間戳以毫秒爲單位。對它們進行比較，你要麼乘的第一個或除以1000

下面是最終代碼的第二個，以使事情更容易，我創建likeLink，這與類「UFILikeLink」的鏈接，和likeSpan，它表示鏈接中包含的文本（用戶真正點擊的文本）。

document.body.addEventListener('click', function(e) { 
    var likeLink = $(e.target.parentElement), 
     likeSpan = $(e.target), 
     timestamp, oldTimestamp; 

    // If the clicked element is not the Like button, just stop the function 
    if (!likeLink.hasClass("UFILikeLink")) return; 

    // If the users clicks to UNLIKE, you don't need to check 
    if (likeSpan.text() == 'Unlike') return; 

    timestamp = +likeLink.parents(".userContentWrapper").find("abbr").attr("data-utime"); 

    // Set a limit of one month ago (2592000 seconds = 30 days) 
    oldTimestamp = +new Date()/1000 - 2592000; 

    // If the post is older than one month... 
    if (timestamp < oldTimestamp && !confirm("Are you sure you want to like this?")) { 
     // like was not intended, lets stop that like! 
     e.stopPropagation(); 
     e.preventDefault(); 
    } 
}, true);

上面的代碼會提示「你確定嗎？」超過一個月的帖子的消息。您可以編輯檢查變量，將其設置爲較舊或較新的帖子。

來源

2015-01-14 10:10:22

只是爲了記錄：https：//developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes – Xan

@Xan因爲jQuery對象沒有獲得數據集，我發現它更容易做$ el.attr（'data-x'）'而不是'$ el [0] .dataset.x'。 –

我想你是對的。 – Xan

獲取到，但是你想父格的引用。如果你知道div的ID，那是一個選項。如果他們都在一個容器內，也許你可以通過ID獲取它並遍歷它的子項。你必須提供標記以獲得更具體的答案。一旦你有了對div的引用，你可以通過標籤名稱獲得子元素（假設裏面只有一個abbr標籤，或者至少有可識別的模式）。這是你可以做的一個例子。

document.getElementById('parentDivId').getElementsByTagName('abbr')[0].getAttribute('data-utime');

打破了這一點成零件，

的document.getElementById（ 'parentDivId'）獲取具有指定ID的參考元件，在這種情況下< DIV ID = 「parentDivId」 >
.getElementsByTagName（'abbr'）[0]找到div內的所有子元素，它們是<abbr>標籤，並將它們返回到數組中。 [0]部分從數組中獲取第一個元素。
.getAttribute（「數據UTIME」）獲得從所選擇的縮寫元素屬性。

清楚了嗎？請參閱此處以供參考您在香草中可用的選擇器javascript - http://www.w3schools.com/jsref/dom_obj_document.asp。如果您使用的是jquery（看起來像這樣的問題被標記爲這種方式），它有它自己的一組選擇器具有更多的靈活性。

來源

2015-01-14 05:41:15 Mic

Javascript來分析一個div嗎？

回答

相關問題