Как я могу добавить атрибут селектора Id или сохранить переменную Id в Jquery и использовать эту переменную в качестве селектора? - PullRequest
Новая
       11

Как я могу добавить атрибут селектора Id или сохранить переменную Id в Jquery и использовать эту переменную в качестве селектора?

0 голосов
/ 21 апреля 2020

Я хочу выполнить операцию показать / скрыть элемент textarea, нажав кнопку воспроизведения, используя идентификатор в качестве селектора в jquery, но мой идентификатор имеет вид id = "textarea"+dat.description_id, т.е. dat.description_id - это значение, которое я получил. а также я поместил этот элемент в l oop, чтобы на странице было много полей 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"). PLESE сказать мне решение для этой проблемы ...... 

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');
            }
          })
      });

1 Ответ

0 голосов
/ 21 апреля 2020

Один из способов добиться этого - создать атрибут data-controls для элемента button, который соответствует id соответствующего элемента textarea. Затем вы можете добавить класс js-reply-button к элементам 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();
  });
});
...