如何从一个类函数中制作不同的对象？答案

【问题标题】：How I make different objects from one class function?如何从一个类函数中制作不同的对象？
【发布时间】：2021-09-10 20:57:38
【问题描述】：

我正在制作一个笔记应用程序。

问题是......当我点击我创建的“查看详细信息”按钮时，无论我点击其中的哪个按钮，它都会向我显示我最后制作的内容的模式。

我相信它显示了我从类函数创建的最后一个对象的内容。并且类函数不断刷新对象。

我希望它显示内容取决于我单击的“查看详细信息”按钮。

你能帮帮我吗？谢谢（我在代码上标记了❓我认为问题所在，以便您更轻松地阅读）

class Note {
    constructor(a,b){
        this.title = a;
        this.body = b;   
    }
}

submitBtn.addEventListener('click',run);

function run(e) {
    e.preventDefault();

    let newNote = new Note(titleInput.value,noteInput.value);❓
         
    addNoteToList(newNote);    

    titleInput.value = "" ;
    noteInput.value = "" ;       
}

function addNoteToList(newNote) {
    let note = document.createElement('div');
    note.classList.add('note_new_container');    
    noteNew.append(note);   

    note.innerHTML=    
        <span hidden >${newNote.id}</span>
        <h2 class="note_title">${newNote.title.substring(0,20)}</h2> 
        <div class="note_content">${newNote.body.substring(0,30)}</div>
        <button class="myButton2 detail">view detail</button>
        <button class="myButton2 delete">delete</button>    
    ;  

    noteNew.addEventListener('click', (e) => {
        if (e.target.classList.contains('detail')) {
            activeModal(newNote);
            modalDetailContainer.classList.add('modal_show');
        }  
    }); 
}

function activeModal(a) {    
    document.querySelector('.modal_title').innerHTML= ${a.title};❓
    document.querySelector('.modal_content').innerHTML = ${a.body};❓
}

【问题讨论】：

标签： javascript class object

【解决方案1】：

您的class 代码很好，实例没有问题，也没有共享任何内容。

问题在于您将侦听器 - 所有侦听器 - 附加到包含所有注释的 noteNew 容器，而不是单个新的 note div。单击一个.detail 按钮将全部触发，最后一个将获胜。

【讨论】：