Динамические контент
Здравствуйте, я хочу создать Динамические контент, но уже запутался, Задача было создать связанные списки в форме, а карточка зависеть от второго списка. Списки уже связал, но карточку не получается
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="style.css"> <title>Test</title> </head> <body> <div class="main"> <!-- Form start --> <form action="#" method="POST"> <div class="form"> <div class="sel"> <select name="s_section" id="s_section" class="s_section" required> <option value="" disabled selected>Ընտրեք բաժինը</option> <option value="barber">Վարսահարդարում</option> <option value="manicure">Մատնահարդարում</option> <option value="makeup">Մակիյաժ</option> <option value="massage">Մերսում</option> <option value="surgeon">Ասեղնաբուժություն</option> </select> </div> <div class="sel"> <select name="s_employee" id="s_employee" class="s_employee" required> <option value="" disabled selected>Ընտրեք աշխատակցին</option> </select> </div> <div class="sel"> <input type="date" class="sel_date" title="Ընտրեք օրը" value="Ընտրեք օրը"> <input type="time" class="sel_time" title="Ընտրեք ժամը" value="Ընտրեք օրը"> </div> <div class="times"> <span class="sp_time1">1</span> <span class="sp_time2">2</span> <span class="sp_time3">3</span> <span class="sp_time4">4</span> <span class="sp_time5">5</span> <span class="sp_time6">6</span> <span class="sp_time7">7</span> <span class="sp_time8">8</span> <span class="sp_time9">9</span> <span class="sp_time10">10</span> <span class="sp_time11">11</span> <span class="sp_time12">12</span> <span class="sp_time13">13</span> <span class="sp_time14">14</span> <span class="sp_time15">15</span> <span class="sp_time16">16</span> <span class="sp_time17">17</span> <span class="sp_time18">18</span> <span class="sp_time19">19</span> <span class="sp_time20">20</span> </div> <input type="submit" value="Հաստատել"> </div> </form> <!-- Person_Card --> <div class="person"> <div class="person_card" id="person_card"> <h3 class="person_name"></h3> <p class="person_zag"></p> <img src="" alt="person" class="person_img"> <p class="person_desc"></p> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
var Armine_name = 'Արմինե Վարդանյան';
var Armine_zag = 'Վարսավիր';
var Armine_img = '2.jpg';
var Armine_desc = 'Armine Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Armine = [Armine_name, Armine_zag, Armine_img, Armine_desc];
var Hovik_name = 'Հովիկ Ղամբարյան';
var Hovik_zag = 'Վարսավիր';
var Hovik_img = '1.jpg';
var Hovik_desc = 'Hovik Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Hovik = [Hovik_name, Hovik_zag, Hovik_img, Hovik_desc];
var Karen_name = 'Կարեն Սարգսյան';
var Karen_zag = 'Վարսավիր';
var Karen_img = '3.jpg';
var Karen_desc = 'Karen Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Karen = [Karen_name, Karen_zag, Karen_img, Karen_desc];
var Marine_name = 'Մարինե Հակոբյան';
var Marine_zag = 'Մատնահարդար';
var Marine_img = '2.jpg';
var Marine_desc = 'Մարինե Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Marine = [Marine_name, Marine_zag, Marine_img, Marine_desc];
var Satenik_name = 'Սատենիկ Սաղաթելյան';
var Satenik_zag = 'Մատնահարդար';
var Satenik_img = '1.jpg';
var Satenik_desc = 'Սատենիկ Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Satenik = [Satenik_name, Satenik_zag, Satenik_img, Satenik_desc];
var Gayane_name = 'Գայանե Մելքոնըան';
var Gayane_zag = 'Դիմահարդար';
var Gayane_img = '3.jpg';
var Gayane_desc = 'Գայանե Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Gayane = [Gayane_name, Gayane_zag, Gayane_img, Gayane_desc];
var Satenik_k_name = 'Սաթենիկ Կիրակոսյան';
var Satenik_k_zag = 'Դիմահարդար';
var Satenik_k_img = '2.jpg';
var Satenik_k_desc = 'Սաթենիկ Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Satenik_k = [Satenik_k_name, Satenik_k_zag, Satenik_k_img, Satenik_k_desc];
var Artak_name = 'Արտակ Սարգսյան';
var Artak_zag = 'Ասեղնաբույժ';
var Artak_img = '1.jpg';
var Artak_desc = 'Արտակ Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Artak = [Artak_name, Artak_zag, Artak_img, Artak_desc];
var Karine_name = 'Կարինե Մարգարյան';
var Karine_zag = 'Մերսող';
var Karine_img = '3.jpg';
var Karine_desc = 'Կարինե Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Karine = [Karine_name, Karine_zag, Karine_img, Karine_desc];
var special = {
barber: ['Ընտրեք Աշխատակցին', Armine[0], Hovik[0], Karen[0]],
manicure:['Ընտրեք Աշխատակցին', Marine[0], Satenik[0] ],
makeup: ['Ընտրեք Աշխատակցին', Gayane[0], Satenik_k[0] ],
surgeon: ['Ընտրեք Աշխատակցին', Artak[0] ],
massage: ['Ընտրեք Աշխատակցին', Karine[0] ]
};
var specialist = document.getElementById('s_section');
var person = document.querySelector('#s_employee');
window.onload = selectPerson;
specialist.onchange = selectPerson;
function selectPerson(ev) {
person.innerHTML ="";
var c = this.value || 'barber', o;
for (let i = 0; i < special[c].length; i++) {
o = new Option(special[c][i],i,false,false);
person.add(o);
$("#s_employee option:first").prop("disabled", true).attr({value: ""});
};
};
var card_add = {
name: [Armine_name, Hovik_name, Karen_name, Marine_name, Satenik_name, Gayane_name, Satenik_k_name, Artak_name, Karine_name],
zag: [Armine_zag, Hovik_zag, Karen_zag, Marine_zag, Satenik_zag, Gayane_zag, Satenik_k_zag, Artak_zag, Karine_zag],
img: [Armine_img, Hovik_img, Karen_img, Marine_img, Satenik_img, Gayane_img, Satenik_k_img, Artak_img, Karine_img],
desc: [Armine_desc, Hovik_desc, Karen_desc, Marine_desc, Satenik_desc, Gayane_desc, Satenik_k_desc, Artak_desc, Karine_desc]
};
var cart = $('.person_card');
var child = cart[0].children;
// console.log (child[0]);
//child[0].html('klop');
for (var i = 0; i < child.length; i++) {
console.log(child[i]);
};
$('.person_name').html(Armine[0]);
$('.person_zag').html(Armine[1]);
$('.person_img').attr({src: Armine[2]});
$('.person_desc').html(Armine[3]);
body{
margin: 0;
padding: 0;
background: #C1C6D8;
min-height: 1000px;
}
.main{
margin: 0 auto;
width: 600px;
display: flex;
justify-content: space-between;
}
.sel select {
padding: 8px;
outline: none;
}
.sel input {
padding: 5px;
}
.person{
background: #DCDDDD;
max-width: 310px;
padding: 20px 10px;
}
.person_card{
text-align: center;
border:1px solid #000;
}
|
Вешайте обработчик события change на ваш select, ссылка на который в переменной person сохранена.
При возникновении события изменяйте нужный вам контент. |
var person = document.querySelector('#s_employee')․change(function(){
здесь вообще не понимаю что сделать.
)} ;
а какой массив использовать я уже два дня пытаюсь написать код и много массивов создал, пробовал разные варианты, но безрезультатно. И еще хочу спросить вас вообще такие динамические блоки на jquery пишут или на react, angular |
Цитата:
|
Hovik, у вас в коде сообщения №3 ошибка. Вы путаете native js с библиотекой jquery.
Обработчики события назначаются с помощью метода addEventListener. Цитата:
У вас структура хранения данных неправильная. Измените её на подобную и работать станет проще:
const persons = {
Armine: {
name: '',
zag: '',
image: '',
description: ''
},
Hovik: {
name: '',
zag: '',
image: '',
description: ''
},
...
};
В объекте special у вас тоже не весть пойми что, но тоже что-то нездоровое. Зачем нужен объект card_add тоже непонятно. |
Nexus, извини, но не получается, менял структуру как ты сказал и все дольше не получаться. Не пойму как 9 объекты должны замыкаться со значениям 5 объектов.
$('form select, input').change(function(){
$(this).css('background-color', '#96d496')
});
const persons = {
Armine: {
name: 'Արմինե',
zag: 'Վարսավիր',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aspernatur sunt, atque nisi error quasi dolores itaque saepe ullam. Numquam deleniti delectus laboriosam repellendus illo.'
},
Hovik: {
name: 'Հօվիկ',
zag: 'Վարսավիր',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero error mollitia sit modi consectetur, nostrum, ipsam doloribus culpa? Numquam itaque autem repellat. In, ab natus!'
},
Karen:{
name: 'Կարեն',
zag: 'Վարսավիր',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque nobis placeat eos perspiciatis consectetur accusantium, tempore numquam repudiandae accusamus quisquam, non voluptatum suscipit praesentium distinctio.'
},
Marine:{
name: 'Մարինե',
zag: 'Դիմահարդար',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum pariatur doloremque quasi quibusdam soluta, sunt illo obcaecati, aspernatur ullam adipisci repellendus eos culpa similique nesciunt?'
},
Satenik:{
name: 'Սաթենիկ',
zag: 'Դիմահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore error magnam sapiente ab, explicabo nulla architecto temporibus delectus voluptatem, sed voluptatum optio eveniet rerum quaerat.'
},
Gayane:{
name: 'Գայանե',
zag: 'Մատնահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur voluptatibus nulla culpa nobis, eligendi ipsum assumenda ab cum alias! Ipsa aperiam doloribus alias. Ut, veniam.'
},
Satenik_k:{
name: 'Սաթենիկ Կիրակոսյան',
zag: 'Մատնահարդար',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit, quos quisquam veritatis corrupti perspiciatis provident fugit debitis cum vel facilis voluptate ratione, nesciunt molestias.'
},
Artak:{
name: 'Արտակ',
zag: 'Ասեղնաբույժ',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, dignissimos, dolore. Inventore iste libero commodi nulla dolore cum nam minus rerum, earum, dolor blanditiis voluptatem.'
},
Karine:{
name: 'Կարինե',
zag: 'Մերսող',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur obcaecati pariatur eaque libero, facere numquam excepturi tempore voluptate id architecto necessitatibus odit nemo aliquid consequatur!'
}
};
var special = {
barber: [ persons.Armine.name, persons.Hovik.name, persons.Karen.name],
manicure:[ persons.Marine.name, persons.Satenik.name ],
makeup: [ persons.Gayane.name, persons.Satenik_k.name ],
surgeon: [ persons.Artak.name ],
massage: [ persons.Karine.name ]
// если уберем строка <Выберите сотрудника> то не будет подсказки
};
var specialist = document.getElementById('s_section'); //out
var person = document.querySelector('#s_employee'); //in
specialist.onchange = selectPerson; //function
function selectPerson(ev) {
person.innerHTML ="";
var c = this.value, o;
for (let i = 0; i < special[c].length; i++) {
o = new Option(special[c][i],i,false,false);
person.add(o);
// $("#s_employee option:first").prop("disabled", true).attr({value: ""})
}
};
var cart = $('.person_card'); // div cart
var child = cart[0].children; // all children
var name, zag, img, desc; // childrens variable
person.onchange = function () {
name = $(child[0]).html(persons.Armine.name);
zag = $(child[1]).html(persons.Armine.zag);
img = $(child[2]).attr({src: persons.Armine.image});
desc = $(child[3]).html(persons.Armine.description);
};
console.log(Object.keys(persons).length); //lenght card massiv
console.log(Object.keys(special).length); // lenght select massiv
// var x = ?
// html(persons.x.name);
|
Можно так...
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body {
margin: 0;
padding: 0;
background: #C1C6D8;
font: 1em Sylfaen,"Arial Unicode MS", Tahoma, Arial, sans-serif;
}
input, select {
background: rgba(255, 255, 255, 0.75);
margin: 0.5em 0;
display: block;
padding: 0.5em;
border: 1px solid #eee;
border-radius: 0.5em;
width: 100%;
box-sizing: border-box;
font: inherit;
}
input[type=text]:valid,
input[type=date]:valid,
input[type=time]:valid,
select:valid {
background-color: #c6f4c6;
border-color: #96d496;
}
.main {
margin: 1em auto;
max-width: 600px;
display: flex;
flex-wrap: wrap;
}
.main > * {
flex: 1;
}
.main > form {
margin: 0 0.5em;
}
.main > .person {
background: #DCDDDD;
max-width: 310px;
padding: 20px 10px;
align-self: flex-start;
}
#person_card {
text-align: center;
border:1px solid #000;
}
</style>
<title>Test</title>
</head>
<body>
<div class="main">
<!-- Form start -->
<form method="post">
<label>
Ընտրեք բաժինը:
<select name="s_section" id="s_section" required></select>
</label>
<label>
Ընտրեք աշխատակցին:
<select name="s_employee" id="s_employee" required></select>
</label>
<label>
Ընտրեք օրը:
<input type="date" title="Ընտրեք օրը" required>
</label>
<label>
Ընտրեք ժամը:
<input type="time" title="Ընտրեք ժամը" required>
</label>
<input type="submit" value="Հաստատել">
</form>
<!-- Person_Card -->
<section class="person">
<div id="person_card" class="person_card">
<h3 class="person_name">նախ ընտրեք մասնագետ</h3>
<p class="person_job"></p>
<img class="person_img">
<p class="person_desc"></p>
</div>
</section>
</div>
<script>
const data = [{
name: 'Արմինե',
job: 'Վարսավիր',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aspernatur sunt, atque nisi error quasi dolores itaque saepe ullam. Numquam deleniti delectus laboriosam repellendus illo.'
}, {
name: 'Հօվիկ',
job: 'Վարսավիր',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero error mollitia sit modi consectetur, nostrum, ipsam doloribus culpa? Numquam itaque autem repellat. In, ab natus!'
}, {
name: 'Կարեն',
job: 'Վարսավիր',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque nobis placeat eos perspiciatis consectetur accusantium, tempore numquam repudiandae accusamus quisquam, non voluptatum suscipit praesentium distinctio.'
}, {
name: 'Մարինե',
job: 'Դիմահարդար',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum pariatur doloremque quasi quibusdam soluta, sunt illo obcaecati, aspernatur ullam adipisci repellendus eos culpa similique nesciunt?'
}, {
name: 'Սաթենիկ',
job: 'Դիմահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore error magnam sapiente ab, explicabo nulla architecto temporibus delectus voluptatem, sed voluptatum optio eveniet rerum quaerat.'
}, {
name: 'Գայանե',
job: 'Մատնահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur voluptatibus nulla culpa nobis, eligendi ipsum assumenda ab cum alias! Ipsa aperiam doloribus alias. Ut, veniam.'
}, {
name: 'Սաթենիկ Կիրակոսյան',
job: 'Մատնահարդար',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit, quos quisquam veritatis corrupti perspiciatis provident fugit debitis cum vel facilis voluptate ratione, nesciunt molestias.'
}, {
name: 'Արտակ',
job: 'Ասեղնաբույժ',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, dignissimos, dolore. Inventore iste libero commodi nulla dolore cum nam minus rerum, earum, dolor blanditiis voluptatem.'
}, {
name: 'Կարինե',
job: 'Մերսող',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur obcaecati pariatur eaque libero, facere numquam excepturi tempore voluptate id architecto necessitatibus odit nemo aliquid consequatur!'
}];
data.byJob = data.reduce((object, person) => {
if(person.job in object === false) {
object[person.job] = [];
}
object[person.job].push(person);
return object;
}, {});
var jobsElement = document.getElementById("s_section");
var workersElement = document.getElementById("s_employee");
for(const job in data.byJob) {
jobsElement.add(new Option(job));
}
jobsElement.selectedIndex = -1;
jobsElement.onchange = function selectPerson() {
workersElement.innerHTML = "";
var value = data.byJob[this.value];
for (let i = 0; i < value.length; i++)
workersElement.add(new Option(value[i].name));
workersElement.selectedIndex = -1;
};
workersElement.onchange = function () {
const worker = data.filter(worker => worker.name === workersElement.value)[0];
document.querySelector("#person_card .person_name").textContent = worker.name;
document.querySelector("#person_card .person_job").textContent = worker.job;
document.querySelector("#person_card .person_img").src = worker.img;
document.querySelector("#person_card .person_desc").textContent = worker.description;
};
</script>
</body>
</html>
|
Посмотреть мой код
Malleys,
Спасибо за ваш ответ. Ваш код не смог редактировать видно что вы профессиональный программист и понимаете Армянский, но методы мне не понятно, я только начал улица и практикую. Хотелось чтобы логика было провеянным Вет правильном будет если в конце этот форма обрабатывайся в php, а после в mysqel (создавать записи или получить ответ => типа там такая запись уже существует и показывать зенитны часы, но это потом) и по этому думаю что вместо input time было input radio и checkbox, а еще в теге img src вставлялось название картинке 1.jpg или 3.jpg и.т.л. сейчас оно не вставляется. Еще label конечно хороший вариант, но в option немного красивые, но это некритично Вот мой код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="style.css">
<title>Test</title>
</head>
<body>
<div class="main">
<!-- Form start -->
<div class="form">
<form action="" method="POST">
<div class="sel">
<select name="s_section" id="s_section" class="s_section" required>
<option value="" disabled selected>Ընտրեք բաժինը</option>
<option value="barber">Վարսահարդարում</option>
<option value="manicure">Մատնահարդարում</option>
<option value="makeup">Մակիյաժ</option>
<option value="massage">Մերսում</option>
<option value="surgeon">Ասեղնաբուժություն</option>
</select>
</div>
<div class="sel">
<select name="s_employee" id="s_employee" class="s_employee" required>
<option value="" disabled selected>Ընտրեք աշխատակցին</option>
</select>
</div>
<div class="sel">
<input type="date" class="sel_date" title="Ընտրեք օրը" value="Ընտրեք օրը" >
</div>
<div class="times" required>
<input type="radio" value="1" name="time" class="sp_time" id="time1" required>
<label for="time1">10:00</label>
<input type="radio" value="2" name="time" class="sp_time" id="time2">
<label for="time2">10:30</label>
<input type="radio" value="3" name="time" class="sp_time" id="time3">
<label for="time3">11:00</label>
<input type="checkbox" checked disabled value="4" name="time" class="sp_time" id="time4">
<label for="time4">11:30</label>
<input type="radio" value="5" name="time" class="sp_time" id="time5">
<label for="time5">12:00</label>
<input type="radio" value="6" name="time" class="sp_time" id="time6">
<label for="time6">12:30</label>
<input type="radio" value="7" name="time" class="sp_time" id="time7">
<label for="time7">13:00</label>
<input type="radio" value="8" name="time" class="sp_time" id="time8">
<label for="time8">13:30</label>
<input type="radio" value="9" name="time" class="sp_time" id="time9">
<label for="time9">14:00</label>
<input type="radio" value="10" name="time" class="sp_time" id="time10">
<label for="time10">14:30</label>
<input type="radio" value="11" name="time" class="sp_time" id="time11">
<label for="time11">15:00</label>
<input type="radio" value="12" name="time" class="sp_time" id="time12">
<label for="time12">15:30</label>
<input type="radio" value="13" name="time" class="sp_time" id="time13">
<label for="time13">16:00</label>
<input type="radio" value="14" name="time" class="sp_time" id="time14">
<label for="time14">16:30</label>
<input type="radio" value="15" name="time" class="sp_time" id="time15">
<label for="time15">17:00</label>
<input type="radio" value="16" name="time" class="sp_time" id="time16">
<label for="time16">17:00</label>
<input type="radio" value="17" name="time" class="sp_time" id="time17">
<label for="time17">18:00</label>
<input type="radio" value="18" name="time" class="sp_time" id="time18">
<label for="time18">18:30</label>
<input type="radio" value="19" name="time" class="sp_time" id="time19">
<label for="time19">19:00</label>
<input type="radio" value="20" name="time" class="sp_time" id="time20">
<label for="time20">19:30</label>
</div>
<input type="text" required placeholder="Նշեք ձեր անունը">
<input type="tel" required placeholder="Նշեք ձեր հեռախոսահամարը" pattern="[0-9]{9}"> <br><br>
<input type="submit" value="Հաստատել">
</form>
</div>
<!-- Person_Card -->
<div class="person">
<div class="person_card" id="person_card">
<h3 class="person_name">Աշխատակցի անունը</h3>
<p class="person_zag">Մասնագիտությունը</p>
<img src="person.jpg" alt="person" class="person_img">
<p class="person_desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aspernatur sunt, atque nisi error quasi dolores itaque saepe ullam. Numquam deleniti delectus laboriosam repellendus illo.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<style>
body{
margin: 0;
padding: 0;
background: #C1C6D8;
min-height: 1000px;
}
.main{
margin: 0 auto;
max-width: 700px;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
form{
display: flex;
flex-wrap: wrap;
max-width: 310px;
}
.sel{
width: 100%;
}
.sel select,
.sel input,
form input{
padding: 8px;
outline: none;
width: 100%;
border-style: outset;
}
.sel input {
padding: 5px;
box-sizing: border-box;
}
.form{
margin: auto 0;
background: #dcdddd;
padding: 55px 10px;
box-sizing: border-box;
}
input[type="submit"]{
cursor:pointer;
background: #70C370;
transition:.5s;
}
input:valid,
select:valid{
background-color: #96d496 ;
}
.times{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sp_time{
width: 20px;
height: 20px;
margin: 5px;
position: relative;
position: absolute;
z-index: -1;
}
input[type='radio']:checked + label,
input[type='checkbox']:checked + label{
background: red;
color: #fff;
}
.times label {
height: 15px;
background: #73af73;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.person{
background: #DCDDDD;
max-width: 310px;
padding: 20px 10px;
}
.person_card{
text-align: center;
border:1px solid #000;
padding: 0 5px;
}
.person_img{
height: 250px;
}
</style>
|
<script>
const persons = {
Armine: {
name: 'Արմինե',
zag: 'Վարսավիր',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aspernatur sunt, atque nisi error quasi dolores itaque saepe ullam. Numquam deleniti delectus laboriosam repellendus illo.'
},
Hovik: {
name: 'Հօվիկ',
zag: 'Վարսավիր',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero error mollitia sit modi consectetur, nostrum, ipsam doloribus culpa? Numquam itaque autem repellat. In, ab natus!'
},
Karen:{
name: 'Կարեն',
zag: 'Վարսավիր',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque nobis placeat eos perspiciatis consectetur accusantium, tempore numquam repudiandae accusamus quisquam, non voluptatum suscipit praesentium distinctio.'
},
Marine:{
name: 'Մարինե',
zag: 'Դիմահարդար',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum pariatur doloremque quasi quibusdam soluta, sunt illo obcaecati, aspernatur ullam adipisci repellendus eos culpa similique nesciunt?'
},
Satenik:{
name: 'Սաթենիկ',
zag: 'Դիմահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore error magnam sapiente ab, explicabo nulla architecto temporibus delectus voluptatem, sed voluptatum optio eveniet rerum quaerat.'
},
Gayane:{
name: 'Գայանե',
zag: 'Մատնահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur voluptatibus nulla culpa nobis, eligendi ipsum assumenda ab cum alias! Ipsa aperiam doloribus alias. Ut, veniam.'
},
Satenik_k:{
name: 'Սաթենիկ Կիրակոսյան',
zag: 'Մատնահարդար',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit, quos quisquam veritatis corrupti perspiciatis provident fugit debitis cum vel facilis voluptate ratione, nesciunt molestias.'
},
Artak:{
name: 'Արտակ',
zag: 'Ասեղնաբույժ',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, dignissimos, dolore. Inventore iste libero commodi nulla dolore cum nam minus rerum, earum, dolor blanditiis voluptatem.'
},
Karine:{
name: 'Կարինե',
zag: 'Մերսող',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur obcaecati pariatur eaque libero, facere numquam excepturi tempore voluptate id architecto necessitatibus odit nemo aliquid consequatur!'
}
};
var special = {
barber: [ persons.Armine.name, persons.Hovik.name, persons.Karen.name],
manicure:[ persons.Marine.name, persons.Satenik.name ],
makeup: [ persons.Gayane.name, persons.Satenik_k.name ],
surgeon: [ persons.Artak.name ],
massage: [ persons.Karine.name ]
};
var specialist = document.getElementById('s_section'); //out
var person = document.querySelector('#s_employee'); //in
specialist.onchange = selectPerson; //function
function selectPerson(ev) {
person.innerHTML ="";
var c = this.value, o;
for (let i = 0; i < special[c].length; i++) {
o = new Option(special[c][i],i,false,false);
person.add(o);
}
};
var cart = $('.person_card'); // div cart
var child = cart[0].children; // all children
var name, zag, img, desc; // childrens variable
person.onchange = function () {
name = $(child[0]).html(persons.Armine.name);
zag = $(child[1]).html(persons.Armine.zag);
img = $(child[2]).attr({src: persons.Armine.image});
desc = $(child[3]).html(persons.Armine.description);
};
console.log(Object.keys(persons).length); //lenght card massiv
console.log(Object.keys(special).length); // lenght select massiv
console.log(person[0].innerText);
var b = special.barber.length+special.makeup.length+special.manicure.length+special.surgeon.length+special.massage.length;
console.log(b);
// var x = ?
// html(persons.x.name);
</script>
|
Hovik, поменял в вашем коде... https://codepen.io/Malleys/pen/axoeEj?editors=1000
|
| Часовой пояс GMT +3, время: 05:03. |