1

我的每个“评论”中都有一个字符倒计时脚本。当用户单击“编辑”时，数字会随着人员类型而减少。他们最多可以输入 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...
4

2 回答 2

1

在您的keyup处理程序中，当您真正想要做的是更新与您的..char_count_label.char_count_label<textarea>

代替

$(".char_count_label").html(remaining);

尝试

$(this).next('.char_count_label').html(remaining);

很难知道如何.char_count_label在您的特定情况下查询，因为您没有显示您正在使用的 HTML，但我的要点是您想要引用的单个实例.char_count_label，而不是像您当前正在做的所有实例.

于 2013-08-14T17:53:28.140 回答
1

这里是s 最接近的元素char_count_label的下一个兄弟textareacontrol-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);
    });
});
于 2013-08-14T18:27:10.163 回答