私はこのようになりますfirebaseを使用してアプリケーションを持っている

Question

を動作していない複数のチェックボックスのCSSスタイルを変更する：

クリック各「ブック」の右側にダニボックス、下図のように文字列にfirebaseオブジェクトの値を送信します。

これらのダニボックスをクリックし、私は彼らが青色に変わるので、変更するボックスとコンテンツのスタイルをしたいと思います。私は、クリックイベントににコードのこの部分を追加しました：

function select(data, book, key) { 
 

 
//What I added 
 
document.getElementById('selectBook').style.color="blue"; 
 
document.getElementById('selectBook').style.borderColor="blue"; 
 
// 
 

 
var selectBookRef = book; 
 
    document.getElementById('alltext').value += selectBookRef + ','; 
 
}

しかし、これは最初のボックスブルーになります。どのチェックボックスをクリックしても、最初のものは青色に変わり、残りはグレーのままです。

チェックボックスアイコンと選択したチェックボックスを強調表示するJSを作成するJSコードです。

誰もがそれを助けることができる場合

function refreshUI(list) { 
 
var lis = ''; 
 
var lis2 = ''; 
 
var lis3 = ''; 
 

 

 
//This generates the 3 columns on the application page 
 

 
     for (var i = 0; i < 10 && i < list.length; i++) { 
 
     lis += '<li style="width: 150px" 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 style="width: 150px" 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 style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>'; 
 
     }; 
 
     document.getElementById('bookList').innerHTML = lis; 
 
     document.getElementById('bookList2').innerHTML = lis2; 
 
     document.getElementById('bookList3').innerHTML = lis3; 
 
    }; 
 

 
//This creates the 3 icons of delete, clear and select. 
 
function genLinks(key, bkName) { 
 
var links = ''; 
 
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><i id="deleteBook" class="material-icons">delete</i></a> '; 
 
links += '<a href="javascript:remove(\'' + key + '\',\'' + bkName + '\')"><i id="removeBook" class="material-icons">clear</i></a> '; 
 
links += '<a href="javascript:select(\'' + key + '\',\'' + bkName + '\')"><i id="selectBook" onclick="functionSelected()" class="material-icons">check</i></a>'; 
 
return links; 
 
}; 
 

 
function del(key, bkName) { 
 
var deleteBookRef = buildEndPoint(key); 
 
    deleteBookRef.remove(); 
 
} 
 

 

 
//This is the function to select and insert the data into the string as well as highlight each checkbox 
 
function select(data, book, key) { 
 
document.getElementById('selectBook').style.color="blue"; 
 
document.getElementById('selectBook').style.borderColor="blue"; 
 

 
var selectBookRef = book; 
 
    document.getElementById('alltext').value += selectBookRef + ','; 
 
} 
 

 
function buildEndPoint (key) { 
 
return new Firebase('https://project04-167712.firebaseio.com/books/' + key); 
 
} 
 

 
bookList.on("value", function(snapshot) { 
 
var data = snapshot.val(); 
 
var list = []; 
 
    for (var key in data) { 
 
     if (data.hasOwnProperty(key)) { 
 
      book = data[key].book ? data[key].book : ''; 
 
     if (book.trim().length > 0) { 
 
      list.push({ 
 
      book: book, 
 
      key: key 
 
      }) 
 
     } 
 
    } 
 
} 
 
refreshUI(list); 
 
});

はあまり理解されるであろう。

おかげで、 G

Answer 1

は、私が見ることができる唯一のことは、あなたが同じページ上の複数の異なるオブジェクトに対して同じIDタグを使用していることです。 2つ以上の場所で使用する場合は、クラスを使用してください。重複した問題に直面しているため、同じIDの複数のIDを持つことはできません。