Javascript要分析一个div？

Question

所以我想我会得到一些 Javascript 练习并开始我的第一个 Google Chrome 扩展。我正在做一个扩展，当用户点击 Facebook 上的 "Like" 按钮时，如果他们点击的 post 早于某个阈值，那么它会提示他们确保他们确实想要点击post上的"Like"（防止跟踪时意外点赞）。

我有基本的功能，如果用户点击喜欢它会提示他们确保他们想要点击喜欢，如果他们不是故意的，他们可以在那个时候取消喜欢。但是，现在我正在尝试添加检测 post 是否属于某个年龄，以便仅在 post 旧时提示。

我现在拥有的资源位于此处： https://github.com/mathur/StalkingCondom

本质上，Facebook 将此数据存储在时间戳中，我想知道如何仅从用户当前 "liking" 所在的 post 访问时间戳，而不是任何其他时间戳在页面上。

下面是我在加载文档时运行的代码：

$(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>`

每个 post 都有自己的 div 和特定的唯一 ID。

基本上我需要将整个 UFILikeLink 点击功能包装在一个 if 语句中，如果日期早于某个日期然后执行点击功能，对吗？我该怎么做才能让 Javascript 只在那个唯一的 div?

中找到时间戳

有人愿意给我指出正确的方向吗？这甚至可行吗？非常感谢您的宝贵时间！

Answer 1

根据需要获取对父项的引用 div。如果您知道 div 的 ID，这是一个选项。如果它们都在一个容器中，也许您可以通过 ID 获取它并遍历它的子项。您必须提供标记才能在该部分获得更具体的答案。一旦你有了对 div 的引用，你就可以通过标签名称获取子元素（假设里面只有一个缩写标签，或者至少有可识别的模式）。这是您可以执行此操作的调用示例。

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

把它分成几个部分，

document.getElementById('parentDivId') 获取对具有指定 ID 的元素的引用，在本例中为
.getElementsByTagName('abbr')[0] 查找 div 中所有属于标签的子元素，并且 returns 它们在一个数组中。 [0] 部分从数组中获取第一个元素。
.getAttribute('data-utime') 从选定的缩写元素中获取该属性。

清楚了吗？请参阅此处以参考您在原版 javascript - http://www.w3schools.com/jsref/dom_obj_document.asp 中可用的选择器。如果您正在使用 jquery（看起来这个问题就是这样标记的）它有自己的一组选择器，具有额外的灵活性。

Answer 2

首先：Facebook 的时间线会在您每次到达底部时通过 AJAX 请求进行更新，因此向 $(".UFILikeLink") 添加侦听器只会起作用在前几个 link 秒（在开始时加载）。 如果您希望它适用于所有 link，您必须向 <body> 元素添加一个侦听器。

因此您将使用addEventListener('click', func(){...}, true) 为点击事件添加侦听器，并设置useCapture=true（最后一个参数）。将 useCapture 设置为 true 您可以在事件到达目标元素之前阻止事件并在必要时停止它们。然后，在事件侦听器中，您将检查单击的元素是否具有 class UFILikeButton，如果是，则继续。

现在，在写下任何内容之前，您需要根据以下事实进行一些更正：

用户点击的"Like"文字其实是一个<span>，并没有class"UFILikeLink"，而是[=48] =]它的parent确实。下面是 like link:
的结构
```
<a class="UFILikeLink" href="#" role="button" aria-live="polite" title="Like this" ...>
    <span data-reactid=".27.1">Like</span>
</a>
```
您不知道 <abbr> 元素的确切位置，因此 您需要搜索 it：使用 .parents(".userContentWrapper") 你会找到 post 主体容器，其中包含 <abbr> 元素，然后使用 .find("abbr") 你最终会找到它。这是完整的代码：
```
var timestamp = +$(e.target).parents(".userContentWrapper").find("abbr").attr("data-utime");
```
^{*+（加号）将字符串转换为数字}
如果用户点击"Unlike"而不是"Like"，你不应该显示提示，所以有用检查被单击元素中包含的文本，如下所示：
```
$(e.target).text() == 'Unlike';
```
Facebook 时间戳以秒为单位，但 JavaScript 时间戳以毫秒为单位。要比较它们，您必须将第一个乘以或将第二个除以 1000。

这是最终代码，为了让事情更简单，我创建了 likeLink，它是 link 和 class "UFILikeLink"，以及 likeSpan，表示 link（用户真正点击的那个）中包含的文本。

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

以上代码将在 post 一个月前提示 "Are you sure?" 消息。您可以编辑检查变量以将其设置为旧的或更新的 posts.

Javascript要分析一个div？

Javascript to analyze a div?

javascript

jquery

html

facebook

google-chrome-extension