Изменить InnerHTML на основе привязки нажмите

Я немного новичок в веб-разработке, поэтому я надеялся, что кто-то сможет ответить на этот вопрос для меня.Изменить InnerHTML на основе привязки нажмите

Я создаю прототип для «Веб-мессенджера», подобного Facebook-мессенджеру. У меня есть боковая панель, в которой я заполняю UL якорных тегов при загрузке окна и выглядит как this. Вот код для него

var toAdd = document.createDocumentFragment(); 
var newUL = document.createElement('ul'); 
newUL.id = 'menu-content'; 
newUL.className = 'menu-content collapse out'; 

for(var i = 0; i < 5; i++){ 
    var newLI = document.createElement('li'); 
    var newA = document.createElement('a'); 
    newA.id = 'chat' + i; 
    newA.setAttribute('href', "#"); 
    newA.innerHTML = "Chat" + (i + 1); 
    newLI.appendChild(newA); 
    newUL.appendChild(newLI); 
} 

toAdd.appendChild(newUL) 
document.getElementById("menu-list").appendChild(toAdd);

У меня также есть Div в верхней части страницы, которая будет отображать некоторые подробности о текущем чате, но до поры до времени будет просто отобразить имя чата, так же, как на якорных бирках.

Теперь на основе другого StackOverflow опубликовать правильный способ, чтобы вызвать функцию JS из якорного тега

var c0 = document.getElementById("chat0"); 

//Set code to run when the link is clicked 
// by assigning a function to "onclick" 
c0.onclick = function(id) { 
    //Change Title Name here 
    //Do other stuff in the future 
    return false; 
}

Однако я мог бы 20+ чатов на боковой панели в любое время, так что это походит на много повторяющегося кода для записи.

Есть ли лучший способ сделать это?

источник

2016-12-07 Conor Watson

Дайте вашим чатам общий класс, а не пример chat, затем присоедините событие click ко всем чатам в одно и то же время, используя .getElementsByClassName().

Таким образом, вы можете добавить Classname только после того, как newA.id:

newA.id = 'chat' + i; 
newA.className = 'chat';

Затем присоедините событие щелчка:

var chats = document.getElementsByClassName('chat'); 

for (var i=0; i < chats.length; i++) { 
    chats[i].addEventListener('click', chatClick, false); 
} 

function chatClick(){ 
    //chat is clicked 
    //The 'this' object here refer to clicked element 
}

Вы можете использовать .addEventListener() вместо OnClick.

ПРИМЕЧАНИЯ: Вы можете прикрепить click события непосредственно после создания узла:

for(var i = 0; i < 5; i++){ 
    var newLI = document.createElement('li'); 
    var newA = document.createElement('a'); 
    newA.id = 'chat' + i; 
    newA.setAttribute('href', "#"); 
    newA.innerHTML = "Chat" + (i + 1); 
    newA.addEventListener('click', chatClick, false); //Attach click event HERE 
    newLI.appendChild(newA); 
    newUL.appendChild(newLI); 
    }

Надежда этой помощи.

источник

2016-12-07 11:53:16

Спасибо за помощь! Я добавил 'newA.addEventListener ('click', chatClick)' внутри цикла создания, и я также добавил 'function chatClick() {console.log (" test ");}' в JS-файл, но когда я нажимаю на теги, ничего не отображается в консоли? Я что-то пропустил? –

Попробуйте добавить ', false' в конец' addEventListener', проверьте мое обновление. –

Yap конечно. Вы можете дать им все класс и после нагрузки просто использовать простой jQuery код для привязки OnClick для всех из них:

$('a.className').click(function() { 
    // Your code here 
});

Теперь, если теги а будут добавлены после выполнения кода вы просто должны назвать это снова или привязать к этим элементам вручную.

источник

2016-12-07 11:51:41 Yaser

Изменить InnerHTML на основе привязки нажмите

ответ

Смежные вопросы