$(".room-guests-count").click(function(e){
$(".form-open").toggle();
e.stopPropagation();
});
$('.form-open').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('.form-open').hide();
});
const room = document.querySelector('.room-guests-count');
const form = document.querySelector('.form-open');
const adultsChildren = document.querySelector('.adults-children');
const adultsChildrenWrapper = document.querySelector('.adults-children-wrapper');
// let roomCount = document.querySelectorAll("room-count");
let roomCount = document.querySelectorAll(".room-count");
// roomCount.style.backgroundColor = "red";
let formIsOpened = false;
room.onclick = () => {
if(!formIsOpened) {
form.style.display = 'block'
} else {
form.style.display = 'none'
}
formIsOpened = !formIsOpened;
}
const toggleRoom = () => {
const addRoomButton = document.querySelector('#add-room');
const removeRoomButton = document.querySelector('#remove-room');
const countRoom = document.querySelector('.form-text');
const addSection = () => {
const wrapper = document.createElement("div"); //Создает новый элемент с указанным тегом:
wrapper.className = "adults-children-wrapper"; // имя класса добавить к елементу
// const template = adultsChildrenWrapper.innerHTML; // значение adultsChildrenWrapper присваивается к template
wrapper.innerHTML = adultsChildrenWrapper.innerHTML; // значение adultsChildrenWrapper присваивается к wrapper
adultsChildren.appendChild(wrapper);
}
const removeSection = () => {
adultsChildren.lastChild.remove();
}
addRoomButton.onclick = () => {
if(countRoom.value == 4) return;
countRoom.value++;
roomCount[0].textContent++;
// roomCount.textContent++;
// if (countRoom.value >= 2)
addSection();
}
removeRoomButton.onclick = () => {
if(countRoom.value == 1) return;
countRoom.value--;
roomCount[0].textContent--;
removeSection();
}
}
toggleRoom();
* {
background:lightblue;
}
/*ROOM GUESTS COUNT*/
.room-guests-count {
width: 17.2%;
cursor: pointer;
margin-right: 4%;
background: #fff;
float: right;
height: 66px;
margin-right: 149px;
}
.form-open {
display: none;
position: absolute;
z-index: -1;
top: 110px;
background-color: #fff;
height: auto;
right: -8px;
width: 348px;
}
.form-open:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
right: 300px;
top: -10px;
}
.room-guests-content {
padding-top: 23px;
padding-left: 15px;
}
.click_hidden_text {
position: absolute;
z-index: 1;
left: 163px;
top: 56px;
opacity: 0.8;
}
.form-search {
padding: 0;
margin: 10px 10px 5px 10px;
}
.form-item {
padding: 10px 5px;
clear: both;
height: 14px;
}
.edit-rooms {
font-weight: normal;
font-size: 13px;
float: left;
color: #000;
margin-right: 5px;
}
.rooms-guests-plus {
float: right;
color: #fff;
background:#ccc;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
top: -6px;
position: relative;
font-size: 18px;
cursor: pointer;
}
.form-text {
text-align: center;
width: 6%;
width: 20px !important;
text-decoration: center;
float: right;
border:0;
padding: 0;
height: auto;
outline: 0;
vertical-align: middle;
}
.textfield label {
margin-right: 2.5px;
display: inline;
font-size: 13px;
}
.children-1 label {
display: inline;
font-size: 13px;
}
.rooms-guests-minus {
float: right;
color: #fff;
background:#e7e7e7;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
top: -6px;
position: relative;
font-size: 18px;
cursor:auto;
}
.adults-children {
clear: both;
}
.rooms-id {
line-height: 40px;
float: left;
padding:5px 0 0 15px;
color: #000;
}
.already-min {
float: right;
margin: -16px 0px 2px 6px;
padding: 0;
background: #fff;
}
.already-min-search {
float: right;
margin: 5px 10px 5px 2px;
}
.adults-children-wrapper {
clear: both;
}
.children-1 {
padding: 10px 5px;
clear: both;
height: 14px;
}
.edit-children {
font-weight: normal;
font-size: 13px;
float: left;
color: #000;
margin-right: 5px;
}
.textfield {
clear: both;
height: 14px;
margin: 0;
position: relative;
margin-top: 32px;
}
/*FORM FINISHED*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="room-guests-count">
<div class="room-guests-content">
Взрослых
<span class="ga-count">2</span>
, Детей
<span class="children-count">0</span>
</div>
</div>
<div class="form-open">
<div class="form-search">
<div class="form-item">
<label class="edit-rooms">Количество номеров</label>
<div class="rooms-guests-plus" id="add-room">+</div>
<input type="text" name="rooms" max="9" min="1" maxlength="128" class="form-text" value="1" size="60" readonly="readonly">
<div class="rooms-guests-minus" id="remove-room">-</div>
</div>
</div>
<div class="adults-children">
<div class="adults-children-wrapper">
<div class="rooms-id">Номер <span class="room-count">1</span>:</div>
<div class="already-min-search">
<div class="children-1">
<label for="edit-children">Детей</label>
<div class="rooms-guests-plus">+</div>
<input type="text" name="childrenqt" value="0" max="5" min="0" maxlength="5" size="60" maxlength="128" class="form-text">
<div class="rooms-guests-minus">-</div>
</div>
</div>
<div class="already-min">
<div class="textfield">
<label for="edit">Взрослых</label>
<div class="rooms-guests-plus">+</div>
<input type="text" name="edit" value="2" max="10" min="0" maxlength="5" size="60" maxlength="128" class="form-text">
<div class="rooms-guests-minus">-</div>
</div>
</div>
</div>
</div>
</div>
大家好,有这么简单的代码,当你点击+的时候,同步创建了一个block,加上,你可以看到,第一个元素统计了所有block的个数。其他所有block都稳定工作。我什么都试过了知道修复它,包括 for 循环
for(var i = 1;i < roomCount.length;i++){
roomCount[i].textContent++;
}
请帮帮我
为了让它工作,只需尝试这个选项:
adultsChildren.appendChild(wrapper)).querySelector(".room-count").innerText = countRoom.value;roomCount[0].textContent++;通常roomCount[0].textContent--;删除我知道这是一个实验代码,但是现在里面有很多多余的东西