JQuery для скрытия и отображения текстового поля

У меня есть текстовое поле, которое я хочу показать/скрыть, когда я нажимаю кнопку а также мне нужно, чтобы он нацеливался таким образом, потому что я буду использовать его неопределенное количество раз

ПРИМЕР ИЗОБРАЖЕНИЯ ЗДЕСЬ

ПРИМЕР ИЗОБРАЖЕНИЯ ЗДЕСЬ

вот HTML, который я хочу

<div class = "input-group mb-3">
    <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
    <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2"><i class = "bi bi-plus-circle"></i></button>
</div>
<textarea class = "form-control" id = "multipleNameReq"></textarea>
                

и вот скрипт, который я пытаюсь использовать, чтобы скрыть/показать его

$('body').on('click', '.buttonMultipleNameReq',function(){
    const element1 = $(this);
    const target1 = element1.parent().parent().find("#multipleNameReq");
    console.info(target1);

    if (target1.style.display === "none") {
    target1.style.display = "block";
    } else {
    target1.style.display = "none";
    }
})

Попробуйте Jquery toggle() api.jquery.com/toggle

Hkachhia 10.02.2023 05:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
94
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Поскольку вы используете jQuery, вы можете использовать его синтаксис:

Чтобы получить элемент: $('#multipleNameReq');

Чтобы проверить, виден ли элемент и не скрыт: $('#multipleNameReq').is(":visible");

Показывать: $('#multipleNameReq').show();

Прятаться: $('#multipleNameReq').hide();

Решение для добавления в вашу функцию щелчка будет выглядеть так:

 if ($('#multipleNameReq').is(":visible")) {
    $('#multipleNameReq').hide();
 } else {
    $('#multipleNameReq').show();
 }

это работает только в первом ряду, сэр .. кстати, спасибо за попытку помочь мне :)

Aldrin John Villasis 10.02.2023 05:56

Чтобы получить доступ и изменить стиль элемента, вам нужно использовать функцию css.

$('body').on('click', '.buttonMultipleNameReq', function() {
  const element1 = $(this);
  const target1 = element1.parent().parent().find("#multipleNameReq");
  if (target1.css('display') === "none") {
    target1.css('display', "block");
  } else {
    target1.css('display', "none");
  }
})
<div>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class = "input-group mb-3">
    <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
    <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2">Click<i class = "bi bi-plus-circle"></i></button>
  </div>
  <textarea class = "form-control" id = "multipleNameReq" style = "display: block;"></textarea>
</div>

Спасибо, сэр. Я плохо разбираюсь в javascript/jquery, так что это мне очень помогло. Еще раз спасибо, сэр :D

Aldrin John Villasis 10.02.2023 05:56
Ответ принят как подходящий

принятый ответ будет хорошо работать для недубликата id из textarea или любого другого elements, но, как вы показали на своем изображении, если вы хотите работать с несколькими textarea или любыми elements, я предлагаю вам использовать class attribute вместо id attribute, здесь — это объяснение того, почему нельзя использовать один и тот же идентификатор несколько раз,

Повторяющиеся идентификаторы — это распространенные ошибки проверки, которые могут нарушить доступность меток, например полей формы и ячеек заголовков таблиц.

Чтобы решить эту проблему, измените значение идентификатора, если оно используется более одного раза, чтобы убедиться, что каждое из них уникально.

ниже приведен фрагмент кода, который может помочь вам получить то, что вы ищете

$('body').on('click', '.buttonMultipleNameReq',function(e){
    let textArea = $(e.target).parent().parent().find('textarea');
    if (textArea.css('display') == "block"){
        textArea.hide()
    }else{
        textArea.show()
    }
})
.multipleNameReq{
  display:block
}
<div>
  <div class = "input-group mb-3">
      <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
      <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2">hide/show</button>
  </div>
  <textarea class = "form-control multipleNameReq"></textarea>
</div>
<div>
<div class = "input-group mb-3">
    <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
    <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2">hide/show</button>
</div>
<textarea class = "form-control multipleNameReq"></textarea>

</div>

<div>
<div class = "input-group mb-3">
    <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
    <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2">hide/show</button>
</div>
<textarea class = "form-control multipleNameReq"></textarea>

</div>
                
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Использование функции переключения

здесь ниже более простой код с использованием переключателя jquery, здесь вы можете прочитать о toggle

$('body').on('click', '.buttonMultipleNameReq',function(e){
    $(e.target).parent().parent().find('textarea').toggle();
})
<div>
  <div class = "input-group mb-3">
      <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
      <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2">hide/show</button>
  </div>
  <textarea class = "form-control multipleNameReq"></textarea>
</div>
<div>
<div class = "input-group mb-3">
    <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
    <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2">hide/show</button>
</div>
<textarea class = "form-control multipleNameReq"></textarea>

</div>

<div>
<div class = "input-group mb-3">
    <input type = "text" name = "tname[]" class = "form-control" required placeholder = "req. for">
    <button class = "btn btn-outline-secondary buttonMultipleNameReq" type = "button" id = "button-addon2">hide/show</button>
</div>
<textarea class = "form-control multipleNameReq"></textarea>

</div>
                
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Это сработало, сэр, и спасибо, что сообщили мне об этом :)

Aldrin John Villasis 10.02.2023 06:14

Другие вопросы по теме

Похожие вопросы

React js, хотел показать анимацию только на добавленном элементе «добавить в корзину»
В веб-компоненте Как показать всплывающую подсказку и скрыть всплывающую подсказку при нажатии снаружи или при нажатии другой всплывающей подсказки
Как сохранить значение, сгенерированное циклом for, внутри массива
React Native — попытка изменить 2 высоты просмотра с помощью GestureHandler
Почему input.val() нельзя сохранить как глобальную переменную?
Я не знаю, почему я не могу получить доступ к API открытого ИИ для использования в реагирующем приложении
(Узел) Ошибка [ERR_HTTP_HEADERS_SENT]: невозможно установить заголовки после их отправки клиенту
Как исправить это, чтобы отображалось переменное количество пунктов меню?
Как искать и сопоставлять, если имя листа из значения ячейки на другом листе в скрипте приложений Google и копировать ячейки
Пользовательская функция сортировки ведет себя по-разному для строковых и цифровых клавиш