javascript - 有没有办法动态地将一个元素添加到与另一个选定元素相同的高度？

Question

我是前端开发新手。我正在尝试编写注释工具。下图显示了示例屏幕。用户选择一个句子后，一个注释框出现在右侧栏中与突出显示的句子相同的水平位置。关于如何实现该效果的任何想法？

这是我的 html 结构。我用的是Zurb Foundation的框架:

  <section id="main">
        <div class="row">
            <div class="small-8 large-8 columns"id="rawdata">

                <p> <span class="sentence">2:22 So, last time I was here, I don't know if I told you this, but, um, we kind of did a "I like, I wish" activity on paper, about things that you like about studio, and things that you wish would change.</span><span class="sentence"> Um, do you want to share any of those thoughts now, so maybe we can talk about them? [name], I have yours if you want to look at it again.</span></p>
                <p><span class="sentence">2:47 I forgot to add something.</span></p>
                <p><span class="sentence">2:54 Well, I don't know, in terms of what I dislike about studio.</span></p>
                <p><span class="sentence">2:57 So, some people wrote in theirs that, um, they dislike how cluttered it gets.</span></p>

                <p><span class="sentence">5:09 I don't get bothered.</span>< <span class="sentence">I like the draftiness, I'm a little...</span><span class="sentence"> I'm one of the ones that opens the windows, and like—</span></p>
            </div>
            <div class="small-4 large-4 columns" id="annotations"><p></p>
            </div>
        </div>
    </section>

选句加注解JS:

 <script>
        $('.sentence').click(function() {
            $(this).toggleClass('sentenceStyle');
            var y = $(this).offset().top;

            var para = document.createElement("p");
            $("#annotations").append(para);
            para.innerHTML="this is an annotation";
            para.css("position",'absolute');
            para.style.top = y;
        });
    </script>

这是 fiddle :http://jsfiddle.net/yujuns/HDe6v/3/

Answer 1

您希望在代码中更改一些内容。

首先您需要的是获取选区的偏移量。只有在选择周围放置一个 html 标记然后获取其偏移量，才会发生这种情况。然后，您可以通过将其 left 和 top 偏移量设置为您从 html 元素获得的偏移量来放置一个 absolute 定位的消息框。

在下面的 fiddle 中，我展示了一个基本的实现来给你基本的想法。希望对您有所帮助。

Fiddle

编辑:试试这个 fiddle 更新。(回答作者的问题)。我在添加到 js 的代码行中添加了注释。我还为 annotations

添加了 position: relative 到 css

Updated Fiddle