-1
我有其中包含一个列表，看起来像这样的应用程序：如何实施getElementByClassName（）
当我点击每个刻度，这本书的名字添加到下面的文本框，我希望用户可以删除它的交叉点替换刻度线。
目前的情况是，当我点击任何蜱，只有第一个列表项框变为十字这样的：
不过，我想无论蜱是旁边的书改变而不是列表顶部的第一个。
我知道这个问题与需要成为类元素而不是ID的项目有关，因为使用ID标记将始终选择具有该ID的第一项。然而，我不确定如何将它实现到我的代码中，因为我试过用类名打包tick和cross box，并且仍然发生相同的事情。
的JS代码如下所示：
function saveToList(event) {
if (event.which == 13 || event.keyCode == 13) {
function saveToFB(bookName) {
var user = firebase.auth().currentUser;
var bookList = firebase.database().ref('users/' + uid + '/');
var uid = user.uid;
// This will save data to Firebase
bookList.push({
book: bookName
});
};
// This is JS which creates the list from firebase data. Split into 3 lists holding 10 books each
function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';
for (var i = 0; i < 10 && i < list.length; i++) {
// Creates the list item by adding the firebase object + genLinks which contains the select, remove and delete icons.
lis += '<li data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 10; i < 20 && i < list.length; i++) {
lis2 += '<li data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 20; i < 30 && i < list.length; i++) {
lis3 += '<li data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
// Populates the HTML lists with the JS list items
document.getElementById('bookList').innerHTML = lis;
document.getElementById('bookList2').innerHTML = lis2;
document.getElementById('bookList3').innerHTML = lis3;
};
// This is the area of the JS concerned with generating the icons found alongside each book name and where I need help
// The google icons wrapped in divs with class names
function genLinks(key, bkName) {
var links = '';
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><div class="deleteBook"><i id="deleteBook" class="material-icons">delete</i></div></a> ';
links += '<a href="javascript:remove(\'' + key + '\',\'' + bkName + '\')"><div class="removeBook"><i id="removeBook" class="material-icons" onclick="showAdd()" style="display: none">clear</i></div></a> ';
links += '<a href="javascript:select(\'' + key + '\',\'' + bkName + '\')"><div class="selectBook"><i id="selectBook" class="material-icons" onclick="showRemove()">check</i></div></a>';
return links;
};
// onClick event from the selectBook icon which hides the tick and replaces with a cross
function showRemove() {
document.getElementById('removeBook').style.display = 'block';
document.getElementById('selectBook').style.display = 'none';
}
// onClick event from the removeBook icon which hides the cross and replaces with a tick
function showAdd() {
document.getElementById('selectBook').style.display = 'block';
document.getElementById('removeBook').style.display = 'none';
}<div id="bookListContainer">
<ol id="bookList"> </ol>
<ol id="bookList2"> </ol>
<ol id="bookList3"> </ol>
</div>我被告知有人使用getElementsByClassName方法（），但他们对如何做到这一点没有任何解释。如果任何人有任何建议或可以提供一些帮助，我会非常感激。
由于提前，
摹
所以澄清：您正在寻找关于如何使用'getElementsByClassName'的教程？你希望我们重写你的代码来使用它？ – evolutionxbox
你有[阅读'getElementsByClassName方法的任何文件（）']（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName）？ – Pointy
带复选框的CSS会让这更容易。 – epascarello