JQuery Переключение InputBox в зависимости от значения другого поля ввода - PullRequest
Новая
       5

JQuery Переключение InputBox в зависимости от значения другого поля ввода

0 голосов
/ 15 февраля 2020

У меня есть страница, которая содержит два поля ввода. Мне нужно, чтобы одно поле ввода исчезло, а затем появилось снова в зависимости от того, есть ли значение в другом. Я читал, что использование JQuery - это самый простой способ сделать это, однако у меня ограниченный опыт работы с ним и я не могу найти документацию о том, как это реализовать. Вот эта страница: 

<label asp-for="Subject" class="control-label"></label>
<input asp-for="Subject" class="form-control" id="Subject"/>

<label asp-for="Header" class="control-label"></label>
<input asp-for="Header" class="form-control" id="Header"/>

Вот эта JQuery У меня так далеко от моих ограниченных знаний. Поле ввода исчезло с самого начала. 

<script type="text/javascript">
$("#Subject").val(function () {
    $("#Header").toggle(this.length > 0);
});

Я не уверен, как реализовать это, когда при вводе текста в одном текстовом поле другое исчезает. Отладчик не выдает никаких сообщений об ошибках в коде.

Ответы [ 2 ]

2 голосов
/ 15 февраля 2020 

$("#Subject").on("input", function() {
  let $e = $("#Header");
  $(this).val() == "" ? $e.addClass("hidden"): $e.removeClass("hidden");
});
.hidden {
  display: none !important; 
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <label asp-for="Subject" class="control-label"></label>
  <input asp-for="Subject" class="form-control" id="Subject"/>

  <label asp-for="Header" class="control-label"></label>
  <input asp-for="Header" class="form-control hidden" id="Header"/>
</body>

</html>
2 голосов
/ 15 февраля 2020

Если вы хотите показать «Заголовок», когда пользователь что-то набрал в поле «Тема»: 

$("#Subject").on("input", function () {
   $("#Header").toggle(!!$(this).val().length);
});

Вы также должны добавить style="display: none;" к заголовку, чтобы изначально скрыть его.

В качестве альтернативы вы можете вызвать событие 'input' вручную один раз: 

$("#Subject").on("input", function () {
   $("#Header").toggle(!!$(this).val().length);
}).trigger("input");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...