我有一个块。当我单击加号时，会创建 4 个子块。当我单击任何子块加号按钮时，我必须添加（rooms-guests-plus类），它们增加自0 to 5当单击减号按钮时（rooms-guests-minus类）以同样的方式减少。
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');
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";
wrapper.innerHTML = adultsChildrenWrapper.innerHTML;
adultsChildren.appendChild(wrapper).querySelector(".room-count").innerText = countRoom.value;
}
const removeSection = () => {
adultsChildren.lastChild.remove();
}
addRoomButton.onclick = () => {
if(countRoom.value == 4) return;
countRoom.value++;
addSection();
}
removeRoomButton.onclick = () => {
if(countRoom.value == 1) return;
countRoom.value--;
removeSection();
}
}
toggleRoom();
body {
background:#000;
}
/*ROOM GUESTS COUNT*/
.room-guests-count {
width: 32.2%;
cursor: pointer;
margin-right: 4%;
background: #fff;
float: left;
height: 66px;
margin-right: 149px;
}
.form-open {
display: block;
position: absolute;
z-index: -1;
top: 85px;
background-color: #fff;
height: auto;
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, #add-room {
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, #remove-room {
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;
}
<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">
Adult
<span>2</span>
, Child
<span>0</span>
</div>
</div>
<div class="form-open">
<div class="form-search">
<div class="form-item">
<label class="edit-rooms">Amount of number</label>
<div id="add-room">+</div>
<input class="form-text" value="1">
<div id="remove-room">-</div>
</div>
</div>
<div class="adults-children">
<div class="adults-children-wrapper">
<div class="rooms-id">Number <span class="room-count">1</span>:</div>
<div class="already-min-search">
<div class="children-1">
<label for="edit-children">Child</label>
<div class="rooms-guests-plus">+</div>
<input type="text" value="0" class="form-text">
<div class="rooms-guests-minus">-</div>
</div>
</div>
<div class="already-min">
<div class="textfield">
<label for="edit">Adult</label>
<div class="rooms-guests-plus">+</div>
<input type="text" value="0" class="form-text">
<div class="rooms-guests-minus">-</div>
</div>
</div>
</div>
</div>
</div>
我写了if阻止addSection function循环遍历所有元素（类.rooms-child-plus）它有效，但循环显示错误Can not read property 'addEventListener' of undefined.
if (adultsChildren.appendChild(wrapper)) {
for(let i = 0;i < 4;i++){
var roomsChildPlus = document.querySelectorAll(".rooms-child-plus");
roomsChildPlus[i].addEventListener("click", function(){
alert("hi");
})
}
}
问题是为什么会输出这样的错误并且在我正确的路径上？以及如何获取所有元素querySelectorAll然后使用addEventListener作为数组也以同样的方式
你应该循环你的roomsChildPlus而不是硬编码长度 4。
var roomsChildPlus = document.querySelectorAll(".rooms-child-plus");
for(let j=0; j<roomsChildPlus.length; j++){
roomsChildPlus[j].addEventListener("click", function(){
alert("hi");
});
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
