Coffeescript 没有指向正确的元素

Question

嗨，我有一个这样的 coffeescript 代码：

$(document).on 'keyup', '.content_length', ->
$(this).nextAll('div.char_counter:first').text(255 - $(this).val().length);

应该制作此代码的作品：

<div class="create_comment" >
  <%= form_for(announcement.comments.create, url: announcement_comments_path(announcement.id) ) do |form| %>
    <%= form.label :author, "Autor:" %>
    <%= form.text_field :author, class: "form-control" %>

    <%= form.label :content, "Treść:" %>
    <%= form.text_field :content, class: "form-control content_length" %>
    <div class="char_counter">255</div>
    <%= form.submit "Dodaj!", class: "btn btn-primary" %>
  <% end %>
</div>

这是循环创建的一部分。没有 (this).nextAll 的代码运行良好，但它改变了所有 char_counter div 的值。所以我的直觉告诉我，右指有问题div。

编辑：

我想我知道问题出在哪里了。 "this"指的是输入元素，嵌套在一个div中。我尝试 select 与输入文件所在的 div 同级的 div。

            <div class="create_comment" >
                    <form class="new_comment" .../>
                                <div class="field_with_errors"><label for="comment_author">Autor:</label></div>
                                <div class="field_with_errors"><input class="form-control" type="text" name="comment[author]" id="comment_author" /></div>

                                <div class="field_with_errors"><label for="comment_content">Treść:</label></div>
                                <div class="field_with_errors"><input class="form-control content_length" type="text" name="comment[content]" id="comment_content" /></div>
                                <div class="char_counter">255</div>
                                <input type="submit" name="commit" value="Dodaj!" class="btn btn-primary" />

</form>         </div>

Answer 1

$(document).on 'keyup', '.content_length', ->
  $(@).closest('div.char_counter:first').text(255 - $(@).val().length)
  return

Answer 2

CoffeeScript 是 space 敏感的，缩进行 $(this).nextAll('div.char_counter:first').text(255 - $(this).val().length) 像这样：

$(document).on 'keyup', '.content_length', ->
  $(this).find('div.char_counter:first').text(255 - $(this).val().length)

或使用内联版本

$(document).on('keyup', '.content_length', -> $(this).find('div.char_counter:first').text(255 - $(this).val().length))

此外，在 CS 中，您不需要 ; 后语句，并且可能将 nextAll() 更改为 find() 或 closest()，如其他答案所建议的那样。

编辑：

更好的阅读之后你应该改变
$(this).nextAll('div.char_counter:first').text(255 - $(this).val().length)

至：

$('.char_counter').text(255 - $(this).val().length),

如果.char_counterclass没有其他成员，或者改成ID就完了:)

Answer 3

根据您的 html， .content_length 在 .field_with_errors 里面，所以我认为您必须先获取 parent 然后再执行下一步，如下所示：

$(document).on 'keyup', '.content_length', ->
  $(this).parent().next('.char_counter').text(255 - $(this).val().length);

Coffeescript 没有指向正确的元素

Coffescript doesnt point correct element

javascript

jquery

coffeescript