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

Question

I want to perform show/hide operation on textarea element on clicking the replay button using id as selector in jquery but my id is in the form id = "textarea"+dat.description_id ie dat.description_id is the value that i have concate. and also I have put this element in loop so there are many textarea field on the page.

        -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

By performing the Below Jquery Code there is no event occuring on page. According to me if I we can store the Id in the jquery variable we can do that thing but the question is how to use that variable as the selector OR ELSE how to append that dat.description_id in $("textarea") . PLESE tell ME the SOLUTION for this PRoblem......

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

One way to achieve this would be to create a data-controls attribute on the button element that matches the id of the corresponding textarea element. Then you could add a js-reply-button class to the button elements to bind the jQuery events.

I would recommend rewriting your Pug else statement as follows:

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

With this structure, your jQuery to show/hide each text area when someone clicks the reply button could look like this:

$(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();
  });
});