Question

我的问题与这两种方法有关。 DisplayBookmark（）和deleteBookmark（）。显示书签具有网址。当我按下删除按钮时，我需要使用该网址，并将其放入deleteBookmark（）方法。我需要修改这一行： <a class="button button__delete">Delete</a> Codepen example

[相似的示例]第88行（https://github.com/bradtraversy/bookmarker/blob/master/js/main.js），但使用ES5语法

我的想法：

我无法将url作为类属性创建，因为它与书签数组相关联
我尝试使用${onclick = this.deleteBookmark(url)}，但是现在每当我激活displayBookmark（）时它就会启动。仅在单击删除时才需要它。
我无法选择button__delete，因为它不立即存在。

预先感谢

HTML

  <div class="wrapper">
        <form id="bookmarkFormID" class="bookmarkForm">
            <h3 class="bookmarkForm__title">Bookmark your Favourite Sites</h3>
            <p class="bookmarkForm__p">Website Name</p>
            <input id="siteName" type="text" placeholder="Website Name">
            <p class="bookmarkForm__p">Website URL</p>
            <input id="siteURL" type="text"  placeholder="Website URL">
            <input class="submitButton" type="submit" value="Submit">
        </form>
    </div>
    <div class="wrapper">
        <div class="bookmarkResults">  
        </div>
    </div>

JavaScript

class Bookmark {
    constructor(){
        // Properties
        this.siteName               = document.getElementById('siteName');
        this.siteURL                = document.getElementById('siteURL');
        this.bookmarkForm           = document.getElementById('bookmarkFormID');
        this.bookmarksResults       = document.querySelector('.bookmarkResults');

        // Methods
        this.bookmarkForm.addEventListener('submit', event => this.saveBookmarks(event))

        this.validateForm;
        this.displayBookmark;

        this.events();

    }
    events(){
    this.displayBookmark();
    }
    // Save bookmark data and implements local storage
    saveBookmarks(event){

       //  Implements Local Storage
        let bookmarkObject = {
            siteName: siteName.value,
            siteUrl:  siteURL.value
        }

        if(localStorage.getItem("bookmarks") === null){
            let bookmarks = [];
            bookmarks.push(bookmarkObject)
            localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        }else{
            let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
            bookmarks.push(bookmarkObject);
            localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        }
        // Resets form
        this.bookmarkForm.reset();

        this.displayBookmark();
        event.preventDefault();
    }
    // Display bookmark on DOM
    displayBookmark(){
       let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
        // If local storage is empty.
        if(bookmarks == null){
            return false;
        }else{
            this.bookmarksResults.innerHTML = ``;
            for (let index = 0; index < bookmarks.length; index++) {
            let name = (bookmarks[index].siteName).charAt(0).toUpperCase() + bookmarks[index].siteName.slice(1);
            let url = bookmarks[index].siteUrl;
            console.log("url is " + url);
            this.bookmarksResults.innerHTML += 
            `
            <ul>
                <li><h2 ><a class="bookmarkResults__title" href="${url}" target="_blank">${name}</a></h2>
                <a class="button button__delete">Delete</a>
                <a class="button button__edit">Edit</a>
                <a class="button button__visit" href="${url}" target="_blank">Visit</a>
                </li>
            </ul>   
            `
            }  
        }
    }
    deleteBookmark(url){    
        let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
        for (let index = 0; index < bookmarks.length; index++) {
            if(bookmarks[index].siteUrl == url){
                console.log("is it working?");
                bookmarks.splice(index, 1); 
            } 
        }
        localStorage.setItem(bookmarks, JSON.stringify(bookmarks));
    }
}
const bookmark = new Bookmark;

Answer 1

我建议您为ul动态创建DOM，而不仅仅是使用innerHTML。通过var list = document.createElement('ul');创建所有元素，然后附加this.bookmarksResults.appendChild(list)，之后用js创建按钮：var deleteButton = document.createElement('a');时，您只需向其添加事件侦听器即可。另外，我建议您使用button代替a：

var ul = document.createElement('ul');
var deleteButton = document.createElement('button');
deleteButton.addEventListener('click', function(bookmark) {
  // do something with bookmark here
}.bind(bookmarks[index]));
ul.appendChild(deleteButton);

Answer 2

您可以做的是将click事件（用于删除）委派给ul元素。

您可以在元素上使用matchs方法来验证单击了哪个元素。

onListClick(e) {
 var button = e.target;
 // TODO Validate if target is a button

 if (button.matches([DETELE_CLASS])) {
   this.deleteBook(button.dataset);
 } else if (button.matches([UPDATE_CLASS])) {
   this.editBook(button.dataset);
 }

}

例如

class Bookmark {
  constructor() {
    this.handleDelete = this.handleDelete.bind(this);
    this.handleAdd = this.handleAdd.bind(this);
    
    this.cachedElements();
    this.bindEventListeners();
  }
  
  cachedElements() {
    this.bookInput = document.querySelector('#book-input');
    this.bookList = document.querySelector('#book-list');
    this.bookForm = document.querySelector('#book-form');
  }
  
  bindEventListeners() {
    this.bookForm.addEventListener('submit', this.handleAdd);
    this.bookList.addEventListener('click', this.handleDelete);
  }
  
  createBook(bookName) {
     const bookItem = (`
        <li>
          <span>${bookName}</span>
          <button data-name="${bookName}">x</button>
        </li>
     `);
     this.bookList.innerHTML += bookItem;
  }
  
  handleAdd(e) {
    e.preventDefault();
    
    this.createBook(this.bookInput.value);
    this.bookInput.value = '';
  }
  
  handleDelete(e) {
    var button = e.target;
    //TODO add more validation 
    if (button.nodeName !== 'BUTTON') { return; }
   
    button.parentNode.remove()
    
  }
  
}

new Bookmark();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
 <div>
   <div>
     <form id="book-form">
       <input type="text" id="book-input">
     </form>
   </div>
   <ul id="book-list"></ul>
 </div>
</body>
</html>

如何从innerHTML调用方法？

2 个答案: