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類的其他成員，或改變它以身份證，並與它做:)