根據錨點更改InnerHTML點擊

我對Web開發有點新，所以我希望有人能爲我回答這個問題。根據錨點更改InnerHTML點擊

我正在構建一個類似於Facebook Messenger的「Web Messenger」的原型。我有一個側欄，當窗口加載時，我用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);

的代碼，我也有一個檔位已到，這將顯示當前聊天的一些細節頁面的頂部，但是暫時將只顯示聊天的名字，一樣的在錨標籤上。

現在基於另一個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然後使用.getElementsByClassName()將點擊活動附加到所有聊天記錄中。

所以你可以只newA.id之後添加的className：

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

感謝您的幫助！我在創建for循環中添加了'newA.addEventListener（'click'，chatClick）'，並且我還向JS文件添加了'chat chatClick（）{console.log（「test」）;}'，但是當我點擊一個標籤時，控制檯中沒有顯示任何內容？我錯過了什麼？ –

嘗試在'addEventListener'的末尾添加'，false'，檢查我的更新。 –

當然可以。你可以給他們所有的一類和後負荷只使用一個簡單jQuery代碼的onclick綁定爲所有這些：

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

現在，如果執行該代碼後加一個標籤，你只是單純地需要調用此再次或手動綁定到這些元素。

來源

2016-12-07 11:51:41 Yaser

根據錨點更改InnerHTML點擊

回答

相關問題