有没有办法针对特定的 Tumblr post？

Question

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

我发现每个 post 都有一个名为 PostID 的特定 ID，并且我找到了我需要的特定 PostID。我找不到的是 HTML 中 PostID 的实际用法，所以我不知道如何定位它。我试过了：

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

但我确定我说错了。谁能告诉我如何定位它？

Answer 1

简单的序言

正如@approxiblue in this , Tumblr offers a variety of variables所指出的，可以在一个主题中使用，包括PostID。

因此可以替换如下内容：

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

像这样：

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

允许更直接地定位 post，例如：

var post = $('#myPost_129129898812');

长答案

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

这是主页上 Tumblr post 的示例：

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

我们将：

使用 class post
使用 class date
定位 child link 属性 href 包含 post/129129898812，即本例中使用的 PostID
通过 parent 和 class post 使用 parents()
获取位置

代码：

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

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

您可以通过以下方式试用：

要去stolenjokescomic
打开便签本（SHIFT+F4 在 Firefox 中）

粘贴此代码：

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

运行它（CTRL+R 在 Firefox 中）

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

OKMove 主题的替代品

使用PostID获取目标元素。
获取目标在 post 列表中的索引。
获取附加了 zoomIn 函数的元素。
触发点击事件调用 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();
}

有没有办法针对特定的 Tumblr post？

Is there a way to target a specific Tumblr post?

javascript

jquery

tumblr

简单的序言

长答案

OKMove 主题的替代品