Баг или моя криворукость
Добрый день.
Столкнулся с такой ситуацией. Использую коллекцию типа Map + вкладки. Так вот, когда я переключаю вкладки, то я меняю атрибут 2х текстовых полей. Когда я ввожу информацию только в 1 поле, жму проверить, потом переключаюсь на другую вкладку и ввожу значение в то же поле, то оно подсвечивается, а в коллекцию map добавляется откуда-то взявшееся значение старого input'a (по старому, удаленному атрибуту). Уже все что мог перепробовал... решение так и не нашел. Может я что-то делаю неправильно, подскажите p.s. в консоль наглядно выводится, что коллекция map в таком случае откуда то вдруг содержит 4 элемента, вместо 3х Не ругайтесь, если неправильно выбрал тему https://jsfiddle.net/1et7jv5x/ |
shareware,
подожду переводчика, но на всякий случай и загрузка в песочнице, в блоке HTML, строка 1 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>ненужна и даже вредна, если в блоке скриптов уже выбрана загрузка JavaScript + jQuery 3.4.1 |
Цитата:
По шагам: 1 - вводим любое значение в первый инпут 2 - переключаем вкладку 3 - вводим любое значение в первый инпут 4 - переключаем вкладку 5 - видим в консоли, что map.size = 4, вместо 3х Про <script..> видимо копипастнул случайно ) |
shareware,
3 - вводим любое значение в первый инпут 4 - переключаем вкладку 5 - видим в консоли, что map.size = 4, вместо 3х --- а кто стирал пункт номер три? строка 8
$('input[type=text]').on('keyup keydown paste', function(){
getid = $(this).data('id');
*!*
map.set(getid,$(this).val());
*/!*
$(this).removeClass('error');
});
обнуление предыдущих данных в вашем коде идёт после клика по выбору таба, забить или перенести console.log из начала клика,в другое место, в конец клика. |
Цитата:
1 - вводим значение в инпут 2 - жмем кнопку 3 - переключаем вкладку 4 - вводим значение в тот же инпут 5- жмем кнопку Результат: инпут подсвечивается, будто он пустой. Хотя он не пустой |
Цитата:
|
create Map смена вкладок без смены элементов
shareware,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.prepare ul li:not(:nth-child(1)){
margin-left: 10px;
}
.prepare ul{
justify-content: center;
display: flex;
}
.prepare ul li{
list-style: none;
padding: 10px 0;
transition: all .3s;
cursor: pointer;
color: rgb(0 0 0 / 47%);
}
.prepare ul li.active{
box-shadow: 0 2px 0 0px #0000ee;
color: black;
}
.prepare ul li:hover{
list-style: none;
box-shadow: 0 2px 0 0px #0000ee;
color: black;
}
.error-block{
text-align: center;
}
.error-block p{
font-size: 14px;
opacity: 0;
color: red;
transition: all .3s;
}
.error{
box-shadow: inset 0 0 0 1px red;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let map;
let txt = [
['Введите серию документа', 'Введите номер документа'],
['Программа обучения', 'Введите ФИО']
];
let mode = ['seria_number', 'fio_po'];
let key = [
['document', 'seria'],
['po', 'fio']
];
let parent = document.querySelector('.prepare');
let label = parent.querySelectorAll('.input-label')
let inputs = parent.querySelectorAll('input.custom-input');
let li = parent.querySelectorAll('li.mode');
let errBlock = document.querySelector('.error-block p');
let btn = document.querySelector('.send-btn');
let current = 0;
let err = false;
const errorHandler = _ => {
err = false;
inputs.forEach(el => {
let er = !el.value.trim();
el.classList.toggle('error', er);
if(er) err = true;
} )
errBlock.style.opacity = +err;
return !err;
}
const reset = _ => {
inputs.forEach(el => (el.value = '', el.classList.remove('error')));
label.forEach((el, i) => el.textContent = txt[current][i]);
errBlock.style.opacity = 0;
err = false;
map.clear();
}
const createMap = _ => {
if(err) errorHandler();
let ar = key[current].map((k, i) => [k, inputs[i].value]);
map = new Map(ar)
map.set('mode', mode[current]);
console.log(map)
}
parent.addEventListener('click', ({
target
}) => {
if (target = target.closest('li.mode')) {
li[current].classList.remove('active');
current = [...li].indexOf(target);
li[current].classList.add('active');
reset()
}
})
parent.addEventListener('input', createMap);
btn.addEventListener('click', errorHandler);
createMap();
});
</script>
</head>
<body>
<div class="prepare">
<ul>
<li class="mode active">Поиск по серии и номеру документа</li>
<li class="mode" >Поиск по ФИО и программе обучения</li>
</ul>
<div class="error-block">
<p>Исправьте то, что обведено красным</p>
</div>
<div class="d-flex center-flex">
<div class="prepare-block">
<p class="input-label">Введите номер документа</p>
<input type="text" class="custom_one custom-input" value="" placeholder="xxxxxx">
</div>
<div class="prepare-block">
<p class="input-label">Введите серию документа</p>
<input type="text" class="custom_two custom-input" value="" placeholder="xxxxxx">
</div>
</div>
</div>
<button class="send-btn">test</button>
</body>
</html>
|
Цитата:
Попробую еще что-нибудь придумать..не выйдет, воспользуюсь Вашим )) |
| Часовой пояс GMT +3, время: 06:26. |