У меня есть текстовое поле, которое я хочу показать/скрыть, когда я нажимаю кнопку а также мне нужно, чтобы он нацеливался таким образом, потому что я буду использовать его неопределенное количество раз
вот 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, вы можете использовать его синтаксис:
Чтобы получить элемент:
$('#multipleNameReq');
Чтобы проверить, виден ли элемент и не скрыт:
$('#multipleNameReq').is(":visible");
Показывать:
$('#multipleNameReq').show();
Прятаться:
$('#multipleNameReq').hide();
Решение для добавления в вашу функцию щелчка будет выглядеть так:
if ($('#multipleNameReq').is(":visible")) {
$('#multipleNameReq').hide();
} else {
$('#multipleNameReq').show();
}
это работает только в первом ряду, сэр .. кстати, спасибо за попытку помочь мне :)
Чтобы получить доступ и изменить стиль элемента, вам нужно использовать функцию 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
принятый ответ будет хорошо работать для недубликата 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>
Это сработало, сэр, и спасибо, что сообщили мне об этом :)
Попробуйте Jquery toggle() api.jquery.com/toggle