jquery - 试图让我的 jquery 代码了解我的唯一 ID

Question

我的每个“评论”中都有一个字符倒计时脚本。当用户单击“编辑”时，数字会随着用户键入而减少。他们最多可以输入 200 个字符。

每个“评论”的 ID 都是 @review.id

我的评论是这样的:

当我在其下方的“评论”、Review_2 或任何其他评论(可以有很多)中单击“编辑”时，问题出现了:

因此，我在代码中分离/提供唯一 ID 时遇到了问题。我的倒计时脚本是(数字出现的 div 是 char_count_label):

<script>
$(document).ready(function()  {
    var characters = 200 -  $('textarea').val().length;
    $(".char_count_label").append(characters);
    $('textarea').keyup(function(){
        if($(this).val().length > 200){
        $(this).val($(this).val().substr(0, 200));
        }
    var remaining = 200 -  $(this).val().length;
    $(".char_count_label").html(remaining);
    });
});
</script>

在我的 html/erb 中我有:

   <div class = "char_count_label">"</div>

我认为在我的代码中提供特定的评论 ID 会像 <div class = "char_count_label" id="<%= @review.id %>"</div> 这样的技巧但没有成功。有任何想法吗？谢谢!

我被要求与 textarea 和 char_count_label 分享我的 html，所以就在这里!:

<div class="reviews">


    <div class="breadcrumb" id="review_51" style="height: 250px;">
<!-- Edit mode. Show this form, when user clicks the 'Edit' link> -->

<div class="edit_review_form">
  <div class="cancel-edit" id="51">

    <a href="/reviews/51" data-remote="true">Cancel</a>

  </div>

  <form accept-charset="UTF-8" action="/reviews/51" class="simple_form edit_review" data-remote="true" id="edit_review_51" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="put"><input name="authenticity_token" type="hidden" value="vzOYVqk9aSb7tOCUkhd8XbDRtwzRB4PLZ/L0xzsNPcE="></div>
    <div class="inputs">
      <div id="except_comment">


      <div class="control-group string required"><label class="string required control-label edit_form_titles" for="review_name"><abbr title="required">*</abbr> Name</label><div class="label-error"></div><div class="controls"><input class="string required" id="review_name" name="review[name]" size="50" type="text" value="11"></div></div>

      <div class="control-group string optional"><label class="string optional control-label edit_form_titles" for="review_address">Address</label><div class="label-error"></div><div class="controls"><input class="string optional" id="review_address" name="review[address]" onkeydown="if(event.keyCode==13){return false;}" placeholder="Enter address, town or village where you live." size="50" type="text" value="Baldoyle"></div></div>
      <span id="address_validation"></span>

      <div class="control-group tel optional"><label class="tel optional control-label" for="review_phone">Phone</label><div class="label-error"></div><div class="controls"><input class="string tel optional" id="review_phone" name="review[phone]" size="50" type="tel" value=""></div></div>
      </div>


      <div class="control-group text optional"><label class="text optional control-label comments" for="review_comment">Comments:</label><div class="label-error"></div><div class="controls"><textarea class="text optional" cols="40" id="review_comment" maxlength="300" name="review[comment]" rows="2" wrap="soft">public</textarea></div></div>

<div class="char_count_label">194</div>

        <!-- buttons: save, delete, share, keep private -->
      <div class="edit_button_group">


etc...

Answer 1

此处 char_count_label 是 textarea 最近的 control-group 元素的下一个兄弟

$(document).ready(function()  {
    var characters = 200 -  $('textarea').val().length;
    $(".char_count_label").append(characters);
    $('textarea').keyup(function(){
        if($(this).val().length > 200){
            $(this).val($(this).val().substr(0, 200));
        }
        var remaining = 200 -  $(this).val().length;
        $(this).closest('.control-group').next(".char_count_label").html(remaining);
    });
});