let allS = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22
,23,24,25,26,27,28,29,30,31,32,33,34,35,36]
var emp = db.collection('BookedTicketData').get().then((snapshot) => {
snapshot.docs.forEach((doc) => {
data = doc.data();
bseat = data.AllSeat
console.log(bseat) //(2) [33, 34]
})
return bseat;
}).then((s) => {
allS.filter(n => {
if(s.includes(n)){
console.log("n -> " + n)
console.log("s -> " + s) // s -> 33,34
html += `<input type="checkbox" class="dn checkme" name="s-size" id="${n}" value="${n}" disabled/>
<label for="${n}" class="col-2 br-pill f7 m-1 btn text-white bg-danger border-danger grow" data-toggle="tooltip" title="Seat Already Booked" disabled>${n}</label>
`
}
else{
html += ` <input type="checkbox" class="dn checkme" name="s-size" id="${n}" value="${n}"/>
<label for="${n}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark grow">${n}</label>
`
}
});
})
document.getElementById('loader').innerHTML = html;
我必须比较我在变量“bseat”中获得的 Firebase 数据库中的数组，如果“bseat”中的值在“中，则我将这些值与第二个数组“allS”进行比较al"那么我必须应用此代码，如果没有其他部分，但它什么也没做
$('input[type=checkbox]').on('change', function() {
console.log($(this).attr("id"));
let id = $(this).attr("id");
let checkbox = document.getElementById(id);
console.log("C->" + id)
let checkbox_label = $(`[for=${id}]`);
console.log("CL->" + checkbox_label)
if (checkbox_label.hasClass('bg-dark')) {
console.log('Hii')
checkbox_label.removeClass('text-white')
checkbox_label.addClass('text-dark')
checkbox_label.removeClass('bg-dark')
checkbox_label.addClass('bg-white')
} else {
console.log('Bye')
checkbox_label.removeClass('text-dark')
checkbox_label.addClass('text-white')
checkbox_label.removeClass('bg-white')
checkbox_label.addClass('bg-dark')
}
});
最佳答案
这里您需要在async操作之后添加加载器html。
此外，一旦复选框被安装到 DOM 中，就应该添加复选框 onchange 事件。这意味着在设置innerHTML之后。否则 jQuery 将无法在页面内找到您的复选框。
您可以按如下方式更改代码。
let allS = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22
,23,24,25,26,27,28,29,30,31,32,33,34,35,36]
var emp = db.collection('BookedTicketData').get().then((snapshot) => {
snapshot.docs.forEach((doc) => {
data = doc.data();
bseat = data.AllSeat
console.log(bseat) //(2) [33, 34]
})
return bseat;
}).then((s) => {
allS.filter(n => {
if(s.includes(n)){
console.log("n -> " + n)
console.log("s -> " + s) // s -> 33,34
html += `<input type="checkbox" class="dn checkme" name="s-size" id="${n}" value="${n}" disabled/>
<label for="${n}" class="col-2 br-pill f7 m-1 btn text-white bg-danger border-danger grow" data-toggle="tooltip" title="Seat Already Booked" disabled>${n}</label>
`
}
else{
html += ` <input type="checkbox" class="dn checkme" name="s-size" id="${n}" value="${n}"/>
<label for="${n}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark grow">${n}</label>
`
}
});
document.getElementById('loader').innerHTML = html;
//Note: Add change events after setting the html into the DOM.
$('input[type=checkbox]').on('change', function() {
console.log($(this).attr("id"));
let id = $(this).attr("id");
let checkbox = document.getElementById(id);
console.log("C->" + id)
let checkbox_label = $(`[for=${id}]`);
console.log("CL->" + checkbox_label)
if (checkbox_label.hasClass('bg-dark')) {
console.log('Hii')
checkbox_label.removeClass('text-white')
checkbox_label.addClass('text-dark')
checkbox_label.removeClass('bg-dark')
checkbox_label.addClass('bg-white')
} else {
console.log('Bye')
checkbox_label.removeClass('text-dark')
checkbox_label.addClass('text-white')
checkbox_label.removeClass('bg-white')
checkbox_label.addClass('bg-dark')
}
});
})
关于javascript - 如何比较 JavaScript 中 Firebase 上的数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61587074/