#javascript #html
#язык JavaScript #HTML
Вопрос:
Поэтому я пытаюсь создать приложение для чата, такое как messenger. Когда я нажимаю кнопку, должен начаться новый разговор. Я хочу добавить элемент списка в свою обзорную панель слева, но может быть выбран только один, и у него есть имя класса «история-выбранный элемент». Таким образом, каждый новый конвой получает это имя класса, в то время как другие получают другое имя класса, чтобы изменить его внешний вид, но это не сработает.
const newConvoButton = document.getElementById("newmessage"); const addNewConvo = (e) =gt; { e.preventDefault(); const myMessages = document.getElementById('history'); let newListItem = document.createElement('li'); newListItem.textContent = "user " Math.floor(Math.random(2 - 100) * 100); myMessages.appendChild(newListItem); if (newListItem.classList = 'history-item-selected') { newListItem.classList.add('history-item-selected'); } else { newListItem.classList.add('history-item') }; }; newConvoButton.addEventListener('click', addNewConvo); lt;maingt; lt;div id="top"gt; lt;spangt; lt;h2gt;My conversationslt;/h2gt; lt;/spangt; lt;button type="submit" id="newmessage"gt; lt;/buttongt; lt;/divgt; lt;div id="messagecontainer"gt; lt;ul id="history"gt;lt;/ulgt; lt;id id="chatscreen"gt; lt;ul id="messages"gt; lt;ligt;yololt;/ligt; lt;/ulgt; lt;div id="messagebottom"gt; lt;input type="text" placeholder="Start met typen" size="28" height="auto"gt; lt;button type="submit"gt;Sendlt;/buttongt; lt;/divgt; lt;/idgt; lt;/divgt; lt;/maingt; Ответ №1:
Существует «тавтологический» способ сделать то, что вы пытаетесь сделать.
var addNewConvo = (e)=gt; { var nodes = document.querySelectorAll(".history-item-selected"); nodes.forEach(function(elem) { this.classList.remove("history-item-selected"); }); e.target.classList.add("history-item-selected"); } В вашем CSS должно быть что-то вроде
.history-item { /*Styles for history-item*/ } .history-item.history-item-selected { /*Styles for elements with both */ } Комментарии:
1. Я понимаю, в чем твоя логика, но она не сработает.. Каждый элемент, который я добавляю, не получает никакого класса
2. затем адаптируйте узлы к тем, которые действительно получают класс
3. Что вы имеете в виду под «подгонкой узлов»?