Question

在我的Rails应用程序中，我需要使用jQuery在元素旁边显示一个表单。关键是它直接显示在用户点击的地点<h3>标记的右侧。我已经尝试设置它，它正在追加 - 但是，它是在顶部而不是相关标签旁边发布它。

第一个组件是我的观点，我正在展示一篇博文。在它旁边，我想显示一个允许用户评论的表单。这个评论框有一个类exampleToggle，我将用我的jQuery隐藏它，直到用户点击页面的一部分。

myview.html.erb

<div class="special">
    <div class="col-sm-8">
        <% @posts.each do |post| %>
                <h2 id="title"><%= post.title %></h2>
                <p id="category"><%= post.category %></p>
                <div id="paragraph"><%= markdown(post.content) %></div>    
        <% end %>
    </div>

<div class="exampleToggle">
        <%= form_for :comments do |f| %>
            <div class="form-group">
                <div class="field">
                    <%= f.label :post %><br>
                    <%= f.text_area :post, class: "form-control" %>
                </div>
            </div>

            <h5 id="username">Username</h5>
            <div class="form-group">
                <div class="field">
                    <%= f.text_field :username, class: "form-control" %>
                </div>
            </div>

            <%= f.hidden_field :slug, :id => "hiddenPicker"%>

    <div class="actions">
        <%= f.submit "Save", class: "btn btn-success-outline" %>
    </div>
<% end %>
</div>

至关重要的是，当用户点击h3标记时，评论表单会直接显示在单击元素的右侧（想想用户向下滚动的长文章）。为此，我在append框中使用了一些jQuery，并在hidden_field中填写了一些数据：

<script>

    $(document).ready(function(){
        $('.exampleToggle').hide();
        var whatever = document.getElementsByClassName("exampleToggle");
        $("h3").click(function(){
             $('.exampleToggle').show();
             $(this).append(whatever);
              $("form:not(.filter) :input:visible:enabled:first").focus();
            });
        });

    $(function () {
        $('h3').on('click', function (){
        var id = $(this).attr('id');
        $('input#hiddenPicker').val(id);
        });
    });

</script>

所有这一切在本地运行时都有效，只有一个例外：exampleToggle评论表单附加到帖子的最右上角，无论页面上的点击距离是多少。

关于为什么追加的任何想法都不起作用？

另外，如果它有帮助，这里有一些用于该类的CSS：

.exampleToggle {
  position: absolute;
  top: 0;
  margin-left: 4%;
  background-color: white;
  left: 100%;
  width: 300px;
  height: 100px;
  z-index: 2;
}

div .exampleToggle {
    border: 9px solid #002b52;
    height: 260px;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

div .exampleToggle:hover {
  box-shadow: 0 10px 22px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}

使用jQuery在点击元素旁边直接附加动态内容

0 个答案: