javascript - 有没有办法定位特定的 Tumblr 帖子？

Question

我正在尝试向我的 Tumblr 添加动画卷轴，我在这个问题中找到了一个:Smooth scroll to div id jQuery 。但诀窍是，我需要该按钮来跳转到 Tumblr 上的特定帖子。

我发现每个帖子都有一个名为 PostID 的特定 ID，并且我已经找到了我需要的特定 PostID。我找不到 HTML 中 PostID 的实际使用，所以我不知道如何定位它。我尝试过:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("post-{130746374784}").offset().top
    }, 2000);
});

但我确信我把它称为错误的。谁能告诉我如何定位它？

Answer 1

简单的序言

正如 @approxiblue 所指出的在这个comment ，Tumblr提供各种variables可以在主题中使用，包括 PostID。

因此可以替换如下内容:

<div class="post photo">
    <!-- more HTML here -->
</div>

像这样:

<div class="post photo" id="myPost_{PostID}">
    <!-- more HTML here -->
</div>

允许更直接地定位帖子，例如:

var post = $('#myPost_129129898812');

长答案

观察 Tumblr 页面，似乎 PostID 仅在链接中可用。这意味着我们必须找到包含 PostID 的链接，然后返回到其容器 div。

这是主页上 Tumblr 帖子的示例:

<!-- PHOTO POST 
///////////////////////////////////////////////////////-->
<div class="post photo">
    <div class="wide">
        <a href="http://stolenjokescomic.tumblr.com/image/129129898812">
        <img src="http://41.media.tumblr.com/16c2f56a9f739889fbd4896f8524907c/tumblr_nupf28wgLl1toph1no1_1280.png" alt="" />
        </a>
    </div>
    <div class="narrow">
        <div class="metadata">
            <div class="date">
                <a href="http://stolenjokescomic.tumblr.com/post/129129898812">Sep. 15 2015</a>
            </div>
        </div> <!-- metadata end -->
    </div> <!-- narrow end -->
</div> <!-- post end -->

我们将:

1. 使用 post 类定位元素
2. 以date类为目标
3. 使用包含 post/129129898812 的属性 href 定位子链接，这是本示例中使用的 PostID
4. 通过使用 parents() 将类 post 定位到父级来返回
5. 获取位置

代码:

$("#button").click(function() {
    var position = $('.post .date a[href*="post/129129898812"]')
        .parents('.post')
        .offset().top;

    $('html, body').animate({
        scrollTop: position
    }, 2000);
});

您可以通过以下方式尝试:

1. 前往stolenjokescomic
2. 打开便签本(在 Firefox 中为SHIFT+F4)

3. 粘贴此代码:

   $('html, body').animate({
       scrollTop: $('.post .date a[href*="post/129129898812"]')
           .parents('.post').offset().top
   }, 2000);
   

4. 运行它(在 Firefox 中为 CTRL+R)

页面应向下滚动到该帖子。除非你在几个月后读到这篇文章并且该帖子不再出现在主页上。

OKMove 主题的替代方案

1. 使用PostID获取目标元素。
2. 获取帖子列表中目标的索引。
3. 获取附加了 zoomIn 函数的元素。
4. 触发点击事件以根据需要多次调用 zoomIn 函数以到达目标。

代码:

var zoomIn = $('.zoom-in');
var target = $('#content section .about a[href*="post/18629325910"]').parents('section');
var id     = $('#content section').index(target[0]);

for(var i=0; i<id; ++i) {
    zoomIn.click();
}

您可以在 OKMove 上尝试此代码使用便签本。

如果速度太快，我们可以使用递归 setTimeout 进行调整:

var zoomIn = $('.zoom-in');
var target = $('#content section .about a[href*="post/18629325910"]').parents('section');
var index  = $('#content section').index(target[0]);

var count = 0;
var weNeedToGoDeeper = function() {

    if(count < index) {
       zoomIn.click();
       setTimeout(weNeedToGoDeeper, 400);
    }

    ++count;
};

weNeedToGoDeeper();

我们可以进一步扩展它以从任何位置工作，通过解析 transform 属性来分析当前位置，然后通过计算之间的相对位置来决定缩放方式以及缩放次数我们现在在哪里以及我们想去哪里:

function parseMatrix(s) {
    return (
        s.match(/^matrix3d.(.*).$/) || ['', '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0']
    )[1].split(', ');
}

var zoomIn  = $('.zoom-in');
var zoomOut = $('.zoom-out');
var content = $('#content');
var target  = $('#content section .about a[href*="post/18629325910"]').parents('section');
var index   = $('#content section').index(target[0]);

var pos = parseMatrix(pos = content.css('transform'))[14];

pos = Math.round(pos/1000);
pos = index - pos;

var zoomElem = pos <= 0 ? zoomOut : zoomIn;

pos = Math.abs(pos);

for(var i=0; i<pos; ++i) {
    zoomElem.click();
}