带有 JQuery 的 Rails 5：带有显示和隐藏 JQuery 切换的表单最初会显示，但在我刷新页面后会隐藏起来

Posted 2023-05-09

【中文标题】带有 JQuery 的 Rails 5：带有显示和隐藏 JQuery 切换的表单最初会显示，但在我刷新页面后会隐藏起来

【英文标题】：Rails 5 with JQuery: Form with show and hide JQuery toggle will show initially, but hide like it should after I refresh the page

【发布时间】：2017-03-18 20:50:29

【问题描述】：

我有一个帖子链接，它将向您显示 cmets，并允许您单击 div 以显示评论表单，同样，如果您单击取消，则隐藏表单。

当您点击帖子中的链接时，评论表单从打开位置开始，这是我不想要的。

但是，如果我只是刷新页面，它会重新加载视图，评论表单处于隐藏位置。我的 JQuery 技能很弱，我似乎无法弄清楚为什么它会在页面重新加载时起作用，但在来自另一个链接时不起作用。

这是我的评论表单：

# shared/_comment_form
<div id="comment-form" class="form-group">
  <%= form_for @comment, remote: true, url: post_comments_path(@post) do |f| %>
    <%= f.text_area :body, required: true, rows: 5, class: "form-control" %>
    <%= f.hidden_field :commentable_id, :value => @post.id %>
    <%= f.hidden_field :commentable_type, :value => @post.class.name %>
    <br>
    <%= f.submit class: "btn btn-primary" %>
  <% end %>
</div>
<span id="add-comment">Add a comment</span>

这是我的评论表单的 js.erb 文件

# comment_form.js.erb
$('#comment-form').hide().after('<%= j render("comment_form") %>');

我的 JQuery 将打开和关闭表单。

# app/assets/application.js
$( document ).ready(function() 
  $("#comment-form").hide();
  $('#add-comment').click( function() 
    $("#comment-form").fadeToggle("fast");
    ($("#add-comment").text() === "Cancel") ? $("#add-comment").text("Add comment") : $("#add-comment").text("Cancel");
  );
);

【参考方案1】：

你也尝试过使用 css 吗？

#comment-form 
  display: hidden;

【讨论】：

你的意思是display: none;？我可以试试。我试图看看它是否可以用 JQuery 修复。

我尝试使用display:none 并将其设置为.hidden 类。然后我在点击时在.hidden 上使用了.removeClass。现在即使我点击它也不会在来自另一个页面时显示。但是，如果我刷新页面，它就会正常运行。所以那个解决方案并没有完全让我到达那里。