Question

我想设置一个元素内容，以防它是空的。
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是否为nil或者不是nil：

案例1：micropost尚未发表评论（micropost.comments.any?为假）：

$('#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部分已成功执行。

Answer 1

JavaScript将不存在的DOM元素视为具有length = 0的对象。可以通过使用Web浏览器控制台，编写DOM元素并检查控制台输出来验证这一点。选择没有评论的微博（例如，带有id = 304的微博）：micropost.comments.any?将为false，div.comments-section内的所有内容都不会出现在文档中。打开控制台并在提示符处写下以下代码：

$('ol#comments_micropost-304');

输出将是：

[]
Object { length: 0, prevObject: Object, context: HTMLDocument → 1, selector: "ol#comments_micropost-304" }

原始if语句不起作用，因为该对象不为null并且具有length = 0。因此，if语句是if (comments.length == 0)

工作jQwery代码不在条件内工作

1 个答案: