я новичoк, но стараюсь практиковаться по ходу самообучения. Подскажите, пожалуйста, у меня есть два textarea и двe кнопки, которые только визуально относятся к этим окнам. Как мне сделать активным актуальное окно при нажатии на кнопку, которая находится над ним? Спасибо
3 ответа
// выбираем все кнопки со станицы
const buttons = document.querySelectorAll('button[data-target]');
for (const button of buttons) {
// выбираем селектор, соответствующий текстовому полю
const target = button.dataset.target;
// если такой селектор определён...
if (target) {
// находим текстовое поле для этой кнопки
const textarea = document.querySelector(target);
// если поле нашлось
if (textarea) {
// вешаем на кнопку обработчик события "клик"
button.addEventListener('click', event => {
// по клику меняем значение свойства "выключно" на противоположное
textarea.disabled = !textarea.disabled;
// возможно я не правильно понял, что именно нужно сделать с
// этим полем, возможно вы имели в виду, что нужно навести фокус.
textarea.focus();
});
}
}
}
<textarea disabled="disabled" id="ta1"></textarea>
<button data-target="#ta1">Toggle</button>
<br>
<textarea id="ta2"></textarea>
<button data-target="#ta2">Toggle</button>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<textarea class="area_1">1</textarea>
<input type="button" class="button_1" placeholder="1">
<textarea class="area_2">2</textarea>
<input type="button" class="button_2" placeholder="2">
<script>
$(document).on('click','.button_1',function(){
if($('.area_1').hasClass('opened')){
$('.area_1').removeClass('opened');
}
else{
$('.area_1').addClass('opened');
$('.area_1').focus();
}
});
$(document).on('click','.button_2',function(){
if($('.area_2').hasClass('opened')){
$('.area_2').removeClass('opened');
}
else{
$('.area_2').addClass('opened');
$('.area_2').focus();
}
});
</script>
const textarea = document.querySelectorAll('textarea');
[...document.querySelectorAll('button')].forEach((s, i, arr) => {
s.addEventListener('click', function() {
for (let i = 0; i < textarea.length; i++) {
textarea[i].removeAttribute('disabled')
}
textarea[i].setAttribute('disabled', 'disabled')
})
})
<textarea disabled></textarea>
<button>Toggle</button>
<textarea></textarea>
<button>Toggle</button>
-
i
иi
- чтобы запутать Катю?– user176262Commented 10 мая 2018 в 17:26 -
testarea
-элементы. Это могут специальные/парные классы, назначенные кнопке иtextarea
, атрибутыdata-
, общий родитель.