有条件的jQuery代码无法在有条件的内部工作 [英] working jQuery code not working inside conditional

问题描述

如果元素为空，我想设置元素的内容.
html.erb代码如下:

I would like to set an element content in case it is empty.
The html.erb code is below:

<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:

The element I want to set the content is <div class="comments-section">. Its content is empty when the micropost has not yet comments.
I handle the create action of comments with javascript in create.js.erb: I wrote two lines of code, depending on whether micropost.comments is nil or it is not nil:

案例1:微博尚未发表评论(micropost.comments.any?为假):

Case 1: micropost has not yet comments (micropost.comments.any? is false):

$('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/first_comment') %>");

案例2:micropost已经发表评论(micropost.comments.any?是真的):

Case 2: micropost has already comments (micropost.comments.any? is true):

var comments = $('ol#comments_micropost-<%= @micropost.id %>');
comments.append('<%= escape_javascript(render partial: @comment) %>');

两个代码段分别使用时有效.但是，在以下条件下，与案例2一起插入时，案例1的代码不起作用:

Both pieces of code work when are used separately. However the code of case 1 do not work when inserted together with case 2 in the following conditional:

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部分将成功执行.

I do not understand why when if (comments == null) the code is not executed. I also tried with if (comments == undefined) and with if (!comments) with no improvements.
Instead, the else part of the conditional is successfully executed.

推荐答案

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

A non-existent DOM element is considered by JavaScript as an object with length = 0. It is possible to verify this by using a web browser console, writing the DOM element and checking the console output. Choose a micropost without comments (say micropost with id = 304): micropost.comments.any? would be false and everything inside div.comments-section will not appear in the document. Open the console and write the following code at the prompt:

$('ol#comments_micropost-304');

输出将是:

在基于Chromium的浏览器中
1. []
Firefox中的
2. Object { length: 0, prevObject: Object, context: HTMLDocument → 1, selector: "ol#comments_micropost-304" }

1. [] in a Chromium based browser
2. Object { length: 0, prevObject: Object, context: HTMLDocument → 1, selector: "ol#comments_micropost-304" } in Firefox

原始if语句不起作用，因为该对象不为null且具有length = 0.因此，正确的if语句为:if (comments.length == 0)

The original if statement does not work because the object is not null and having length = 0. Therefore the right if statement is: if (comments.length == 0)

这篇关于有条件的jQuery代码无法在有条件的内部工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！