Jquery：在单击的行旁边显示img

Question

我正在尝试为我的网站创建书签功能，因此当有人单击“设置书签”然后单击一行文本时，它将在该行的左侧放置一个书签图像。 （然后我会将coor保存到cookie中，但我可以在没有帮助的情况下做到这一点）

我想到的一种方法是当人们单击段落中的一行文本时，让它抓取该位置的Y坐标该人点击的数字，然后将该数字向下舍入为最接近的可被 20 整除的数字。每个段落的行高为 20px，因此，如果您向下舍入 Y 坐标，那么您将获得段落内该单行的顶部位置他们点击了。

所以我认为它会是这样的：当有人点击段落中的一行文本时，它会得到该段落的索引，所以如果它是页面下方的第4个P，索引将为3，然后它会得到用户单击位置的 Y 坐标，然后将该数字向下舍入到可被 20 整除的最接近的数字，然后将图像放置在该段落的左侧，图像的顶部位置作为舍入的 Y 坐标。

谁能帮我解决这个问题吗？正如你所看到的，我有点迷失了：

$('p').click(function(e) {
    var myIndex = $(this).index()
    var myIndexTop = myIndex.top()
    var myIndexLeft = myIndex.left()

    var offset = $(this).offset();
    var y = e.pageY - this.offsetTop;

    $('.bookMarkImg')
        .left(myIndexLeft)
        .top('round down to nearest num thats divisible by 20)
OR?     
    $('.bookMarkImg')
        .css({'left': myIndexLeft, 'top' 'round down to nearest num thats divisible by 20'})
})

Answer 1

要向下舍入到最接近的 20：

y = Math.floor(y / 20) * 20;

此外，.top() 和 .left() 不存在：您需要：

• $(this) .offset().top 和 $(this).offset().left 用于获取位置
• .css({left: ..., top: ... }) 用于设置它们

另一件事是，如果您只希望其中一个书签图像浮动，具体取决于您单击的位置，那么您可能需要放置 < /code> 位于 级别（最后），并且绝对定位，因此可以在整个文档中自由移动。然后，不必费心从 y 坐标中减去段落的偏移量。

示例代码：

$('p').click(function (e) {
    var offset = $(this).offset();
    var top = Math.floor(e.pageY / 20) * 20;

    $('.bookMarkImg').css({
        left: offset.left,
        top: top
    }).show();
});

查看工作演示：http://jsfiddle. net/upgBa/

注意：不过，您可能必须考虑段落和正文上的任何填充/边距/边框，这可能会导致计算（只需减去其中的“顶部”部分）。