我想设置一个元素内容,以防它为空。
html.erb
代码如下:
<div class="comments-section">
<% if micropost.comments.any? %>
<ol id="comments_micropost-<%= micropost.id %>">
<% micropost.comments.each do |comment| %>
<%= render comment %>
<% end %>
</ol>
<% end %>
</div>
我要设置内容的元素是<div class="comments-section">
。当微博还没有评论时,其内容为空。
我在 create.js.erb
中使用 javascript 处理评论的创建操作:我写了两行代码,取决于是否micropost.comments
为零或不为零:
案例一:微博尚未评论( micropost.comments.any?
为 false):
$('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/first_comment') %>");
案例2:微博已有评论(micropost.comments.any?
为真):
var comments = $('ol#comments_micropost-<%= @micropost.id %>');
comments.append('<%= escape_javascript(render partial: @comment) %>');
两段代码单独使用时都可以工作。但是,当在以下条件中与案例 2 一起插入时,案例 1 的代码不起作用:
if (comments == null) {
$('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/comments') %>");
}
else {
comments.append('<%= escape_javascript(render partial: @comment) %>');
};
我不明白为什么 if (comments == null)
该代码没有被执行。我也尝试过 if (comments == undefined)
并与 if (!comments)
没有任何改进。
相反,else
部分条件已成功执行。
最佳答案
JavaScript 将不存在的 DOM 元素视为 length = 0
的对象。可以通过使用 Web 浏览器控制台、编写 DOM 元素并检查控制台输出来验证这一点。选择没有评论的微博(例如 id = 304
的微博):micropost.comments.any?
将为 false,并且 div.comments-section
中的所有内容code> 不会出现在文档中。打开控制台并在提示符下编写以下代码:
$('ol#comments_micropost-304');
输出将是:
[]
在基于 Chromium 的浏览器中对象 { length: 0, prevObject: Object, context: HTMLDocument → 1, 选择器: "ol#comments_micropost-304"}
在 Firefox 中
原始 if
语句不起作用,因为该对象不为 null 并且 length = 0
。因此,正确的 if 语句是: if (comments.length == 0)
关于javascript - 工作 jQuery 代码在条件内不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44696672/