Question

所以我想我会得到一些Javascript练习并在我的第一个Google Chrome扩展程序上工作。我正在进行扩展，当用户点击Facebook上的“赞”按钮时，如果他们点击的帖子超过某个阈值，那么它会提示他们确保他们确实要点击“喜欢”发布（以防止跟踪时出现意外情况）。

我有基本的功能，如果用户点击它会提示他们确保他们打算这样，并且如果他们不打算，他们可以在那时取消。但是，现在我正在尝试添加检测帖子是否具有特定年龄，以便仅在帖子老了时提示。

我现在拥有的资料来源如下： 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标签之间，如下所示：

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

每个帖子都有自己的div，带有一定的唯一ID。

基本上我需要将整个UFILikeLink点击功能包装在if语句中，如果日期早于某个日期，那么执行click功能吧？我如何才能使Javascript只在一个唯一的div中找到时间戳？

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

Answer 1

首先：每次到达底部时都会通过AJAX请求更新Facebook的时间轴，因此向$(".UFILikeLink")添加一个监听器只能在前几个链接上运行（在开头加载）。 如果您希望它适用于所有链接，您必须向<body>元素添加一个监听器。

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

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

＆＃34;喜欢＆＃34;用户点击的文字实际上是<span>，并且没有类＆＃34; UFILikeLink＆＃34;，但其父级。以下是类似链接的结构：
```
<a class="UFILikeLink" href="#" role="button" aria-live="polite" title="Like this" ...>
    <span data-reactid=".27.1">Like</span>
</a>
```
您并不确切知道<abbr>元素的位置，因此您需要搜索我 t：使用{{1}你将找到包含.parents(".userContentWrapper")元素的帖子正文容器，然后使用<abbr>你终于可以找到它。这是完整的代码：
```
.find("abbr")
```
^{* +（加号）将字符串转换为数字}
如果用户点击＆＃34;与＆＃34;不同而不是＆＃34;喜欢＆＃34;，你不应该显示提示，所以检查点击元素中包含的文本是很有用的，如下所示：
```
var timestamp = +$(e.target).parents(".userContentWrapper").find("abbr").attr("data-utime");
```
Facebook时间戳以秒为单位，但JavaScript时间戳以毫秒为单位。要比较它们，您要么将第一个相乘，要么将第二个相乘1000。

这是最终的代码，为了让我更轻松，我创建了$(e.target).text() == 'Unlike';，这是与类＆＃34; UFILikeLink＆＃34;和likeLink的链接，它代表了包含在链接（用户真正点击的那个）。

likeSpan

上面的代码会提示＆＃34;你确定吗？＆＃34;超过一个月的帖子的消息。您可以编辑检查变量以将其设置为较旧或较新的帖子。

Answer 2

获取您想要的父div的引用。如果您知道div的Id，那么这是一个选项。如果它们都在容器内，也许你可以通过ID获取它并迭代其子容器。您必须提供标记以获得该部分的更具体的答案。一旦你有了对div的引用，你可以通过标签名称获取子元素（假设里面只有一个abbr标签，或者至少有可识别的模式）。以下是您可以进行调用的示例。

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

将其分解为部分，

document.getElementById（'parentDivId'）获取对具有指定ID的元素的引用，在本例中为＆lt; div id =“parentDivId”＆gt;
.getElementsByTagName（'abbr'）[0]查找div中所有＆lt; abbr＆gt;的子元素。标签，并在数组中返回它们。 [0]部分从数组中获取第一个元素。
.getAttribute（'data-utime'）从所选的abbr元素中获取该属性。

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

用Javascript来分析div？

2 个答案: