Question

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

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

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

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

你能帮我吗？（我在代码上标记了❓，因为我假设问题是重点，以便您可以更轻松地阅读）

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};❓
}

Answer 1

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

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

如何从一个类函数创建不同的对象？

1 个答案: