Coffescript犯规点正确的元素

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 divs的walue。所以我的直觉告诉我，指向正确的div有什么问题。

编辑：

我想我知道问题出在哪里。 “this”指的是嵌套在div中的输入元素。我尝试选择一个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

根据你的HTML， .content_length里面.field_with_errors，所以 我认为你必须先得到家长，然后做下一个，像图所示：

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

Answer 2

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

Answer 3

CoffeeScript的是空间敏感，缩进线$(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_counter类的其他成员，或改变它以身份证，并与它做:)