使用 foreach 循环的每个文本区域的字符数-解网

问：

我正在为我的字段使用 foreach 循环，我想为每个字段单独创建一个字符计数。

这是我的 CS 文件中的示例代码

List<Document> record= _repository.Document.GetChecklist(entity.checklist, Convert.ToInt32(entity.ref)).ToList();

if (record.Count() > 0)
        {
            int i = 0;

            foreach (var r in record)
            {   
                _html.Append("<tr>");
                _html.Append("<td style=\"padding-left:20px\" class=\"td-control\">
                              <textarea cols=\"50\" rows=\"5\" maxlength=\"1000\" id=\"desc" + i + "\">" + (String.IsNullOrEmpty(r.desc) ? "" : r.desc.ToString().Trim()) + "</textarea>
                              <div id=\"char-count\">
                              <span id=\"current\">0</span><span>/ 1000</span></div></td>"
                _html.Append("</tr>");
                i++;

            }
        }

css：

#char-count
    {
        float: right;
        padding: 0.1rem 0 0 0;
        font-size: 0.875rem;
    }

我尝试做这样的事情，但它不起作用。

这是我的jQuery

        $("#desc").keyup(function () {
            $("#desc").each(function () {

                var characterCount = $(this).val().length,
                    current = $('#current');

                current.text(characterCount);

            });

        });

对不起，我很难解释。我是编码的初学者，我的英语不是我的第一语言。

jQuery CSS asp.net

由于（）必然是唯一的，因此jQuery可能通过不在此处选择多个元素来做正确的事情，这意味着它确实仅适用于您的第一个元素。但是，使用提供的代码，我们无法真正为您提供帮助。什么？是文本本身吗？它会增加长度吗？什么？什么是？你为什么要申报？那不是JS。如果您使用的是 javascript 以外的其他语言，请使用标签指定。与使用 jQuery 相同，添加该标签。id#_htmla.Count()int i

0赞 Jhonn Matthew Calvelo 9/8/2023

对不起，刚刚编辑了我的帖子，以对我的代码进行更多澄清。

答：

1赞 Chris Barr 9/8/2023 #1

您有一个具有 ID 的元素，但您正在 C# 代码的循环中创建多个元素。HTML 中的 ID 在整个文档中只能存在一次，它必须是唯一标识符。<textarea id="desc">

如果你需要多个，请改用一个类：现在你可以用CSS选择器选择所有类<textarea class="desc">.desc

由于您需要有多个文本区域和字符计数来建立关系，因此我建议在包装父元素上放置一个类，您可以从中找到所需的内部元素。

//Loop over all these wrapper elements
$(".description-wrapper").each(function() {
  //select the elements we need inside of this wrapper
  const textEl = $(this).find('.desc');
  const countEl = $(this).find('.current-count');
  
  //Determine the character count on a keyup event
  textEl.keyup(function () {
    countEl.text(this.value.length);
  });

  //Trigger the event manually on page load so it has an initial count
  textEl.keyup();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="description-wrapper">
      <textarea class="desc">hello world</textarea>
      <p>Char count: <span class="current-count">0</span>/1000</p>
    </td>
  <tr>
    <tr>
    <td class="description-wrapper">
      <textarea class="desc"></textarea>
      <p>Char count: <span class="current-count">0</span>/1000</p>
    </td>
  <tr>
    <tr>
    <td class="description-wrapper">
      <textarea class="desc">foo</textarea>
      <p>Char count: <span class="current-count">0</span>/1000</p>
    </td>
  <tr>
</table>

使用 foreach 循环的每个文本区域的字符数

Character count per textarea using a foreach loop

评论

评论