如何附加 Id 属性选择器或将 Id 存储在 Jquery 变量中并将该变量用作选择器？

Question

我想在 jquery 中使用 id 作为选择器单击重播按钮时对 textarea 元素执行显示/隐藏操作，但我的 id 格式为 id = "textarea"+dat.description_id，即 dat.description_id 是我连接的值。而且我已经把这个元素放在循环中，所以页面上有很多 textarea 字段。

        -if(data.length > 0)
            each dat in data
              form(action="/update/"+dat.description_id, method="post")
                tr
                  td #{dat.description_id}
                  td #{dat.applied_date}
                  td #{dat.fullname}
                  td 
                  td #{dat.complaint_name}
                  td #{dat.complaint}
                  td
                    div(style="display:flex")
                      -if(dat.status == 'Done')
                        p #{dat.replay}
                      -else
                        textarea(name="replay" id="textarea"+dat.description_id class="form-control" cols="30", rows="2")
                        button(type="submit" id="replay-btn"+dat.description_id  class="btn btn-primary m-2" onclick="myfun()") Reply

通过执行以下 Jquery 代码，页面上不会发生任何事件。根据我的说法，如果我们可以将 Id 存储在 jquery 变量中，我们可以做到这一点，但问题是如何将该变量用作选择器，或者如何将 dat.description_id 附加到 $("textarea") 中。 请告诉我这个问题的解决方案......

script.
      $(document).ready(function(){
          $("textarea").hide();
          $('#replay-btn').click(function(){
            $("#textarea").toggle();
          });

          $("#textarea").keyup(function(){
            var len = $(this).val().length;
            if(len > 0)
            {
              $("#replay-btn").attr('type','submit');
            }
            else{
              $("#replay-btn").attr('type','button');
            }
          })
      });

Answer 1

实现此目的的一种方法是在button 元素上创建一个data-controls 属性，该属性与相应textarea 元素的id 匹配。然后你可以在button 元素中添加一个js-reply-button 类来绑定jQuery 事件。

我建议您将您的 Pug else 语句重写如下：

else
  textarea.js-reply-textarea.form-control(id=`textarea_${dat.description_id}`, name='reply', cols='30', rows='2')
  button.js-reply-button.btn.btn-primary.m-2(data-controls=`textarea_${dat.description_id}`, type='submit') Reply

使用这种结构，当有人单击回复按钮时，您的 jQuery 显示/隐藏每个文本区域可能如下所示：

$(document).ready(function() {
  // hide the textarea elements
  $('.js-reply-textarea').hide();
  // when a user clicks the reply button
  $('.js-reply-button').click(function() {
    // get the value of the button's data-controls attribute
    let textareaId = $(this).attr('data-controls');
    // use it to target and toggle the right textarea element
    $('#' + textareaId).toggle();
  });
});