如何解决如何使用在类上创建的方法将从类创建的对象添加到数组
我创建了一个Book类,其中包括一种方法,当单击按钮时,该方法可将单个对象添加到数组。但是,当我单击它时,添加的是来自DOM的按钮本身。
代码如下:
class Book {
constructor(title,author,year,poster){
this.title = title;
this.author = author;
this.year = year
this.poster = poster
}
addToFavourite(){
favouriteBooks.push(this)
}
}
const favouriteBooks = []
const booksList = [ new Book('you don\'t know js',' Kyle Simpson',2014,'https://images-na.ssl-images-amazon.com/images/I/41T5H8u7fUL._SX331_BO1,204,203,200_.jpg'),new Book('javascript the definitive guide','David Flanagan',1996,'https://images-na.ssl-images-amazon.com/images/I/51wijnc-Y8L._SX379_BO1,new Book('Eloquent JavaScript','Marijn Haverbeke',2011,'https://eloquentjavascript.net/img/cover.jpg')
]
const renderBooks = (booksToRender)=>{
booksToRender.forEach(book =>{
//elements to be created
const bookContainer = document.createElement('article')
const posterContainer = document.createElement('div')
const poster = document.createElement('img')
const bookTitle = document.createElement('h2')
const bookYear = document.createElement('p')
const bookAuthor = document.createElement('h3')
const addToFavouriteBtn = document.createElement('button')
//elements setup
addToFavouriteBtn.addEventListener('click',book.addToFavourite)
poster.src = book.poster
bookTitle.textContent = book.title
bookYear.textContent = book.year
bookAuthor.textContent = book.author
addToFavouriteBtn.textContent = 'Add to favourite'
//elements render
posterContainer.append(poster)
bookContainer.append(posterContainer,bookTitle,bookYear,bookAuthor,addToFavouriteBtn)
document.querySelector('main').append(bookContainer)
})
}
renderBooks(booksList)
解决方法
那是因为this
是在单击事件触发时引用按钮而不是书,因此您需要将书绑定到方法,因此addToFavouriteBtn.addEventListener('click',book.addToFavourite)
应该是addToFavouriteBtn.addEventListener('click',book.addToFavourite.bind(book))
使它按预期工作
class Book {
constructor(title,author,year,poster){
this.title = title;
this.author = author;
this.year = year
this.poster = poster
}
addToFavourite(){
favouriteBooks.push(this)
// just demonstration
console.clear();
console.log("---Favourite Books:---\n",favouriteBooks);
}
}
const favouriteBooks = []
const booksList = [ new Book('you don\'t know js',' Kyle Simpson',2014,'https://images-na.ssl-images-amazon.com/images/I/41T5H8u7fUL._SX331_BO1,204,203,200_.jpg'),new Book('javascript the definitive guide','David Flanagan',1996,'https://images-na.ssl-images-amazon.com/images/I/51wijnc-Y8L._SX379_BO1,new Book('Eloquent JavaScript','Marijn Haverbeke',2011,'https://eloquentjavascript.net/img/cover.jpg')
]
const renderBooks = (booksToRender)=>{
booksToRender.forEach(book =>{
//elements to be created
const bookContainer = document.createElement('article')
const posterContainer = document.createElement('div')
const poster = document.createElement('img')
const bookTitle = document.createElement('h2')
const bookYear = document.createElement('p')
const bookAuthor = document.createElement('h3')
const addToFavouriteBtn = document.createElement('button')
//elements setup
addToFavouriteBtn.addEventListener('click',book.addToFavourite.bind(book))
poster.src = book.poster
bookTitle.textContent = book.title
bookYear.textContent = book.year
bookAuthor.textContent = book.author
addToFavouriteBtn.textContent = 'Add to favourite'
//elements render
posterContainer.append(poster)
bookContainer.append(posterContainer,bookTitle,bookYear,bookAuthor,addToFavouriteBtn)
document.querySelector('main').append(bookContainer)
})
}
renderBooks(booksList)
<main></main>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。