工作jQwery代码不在条件内工作 [英] working jQwery 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 =评论截面> 。当微博尚未发表评论时，其内容为空。

我在 create.js.erb 中使用javascript处理注释的创建操作：我写了两行代码，具体取决于 micropost.comments 为零或不是零：

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？为false）：

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) %>');

两个代码在单独使用时都有效。但是，当案例1与以下条件中的案例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？将是假的， 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的浏览器中的b $ b
1. []


2. 对象{length：0，prevObject ：对象，上下文：HTMLDocument→1，选择器：Firefox中的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)

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