javascript - 为 Javascript 卡片降序排序

Question

我正在尝试创建一种排序方法，在我按下按钮时将 DOM 中的卡片从 Z 排序到 A。到目前为止，我已经创建了正确排序数组的逻辑，但似乎无法将其呈现出来。

我有一个 Drink 类和一个 DrinkCard 类，DrinkCard 负责创建实际的卡片，Drink 负责创建 Drink。

我觉得调用 Drink 类有助于将排序后的数组渲染到 DOM，但不确定我会怎么做。绘图空白。

这是我目前所拥有的更新 我根据以下建议进行了更新，但我在任何地方都没有rendered-content id。所以，我在类 .card 上使用了 querySelector，这是当前错误。

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at Drink.render (file:///Users/austinredmond/dev/caffeine_me/frontend/src/models/drink.js:28:17)
    at file:///Users/austinredmond/dev/caffeine_me/frontend/src/index.js:43:38
    at Array.forEach (<anonymous>)
    at HTMLInputElement.<anonymous> (file:///Users/austinredmond/dev/caffeine_me/frontend/src/index.js:43:17)
render @ drink.js:28
(anonymous) @ index.js:43
(anonymous) @ index.js:43

sortDesc.addEventListener("click", () => {
   const sortedArray = allDrinks.sort((a, b) => {
        const nameA = a.name.toLowerCase(),
            nameB = b.name.toLowerCase()
        if (nameA < nameB) //sort string ascending
            return 1
        if (nameA > nameB)
            return -1
        return 0 //default return value (no sorting)
    })

    const node = document.querySelector('.card');
    sortedArray.forEach(card => card.render(node));

})

饮料类

class Drink {

    constructor(data) {
        // Assign Attributes //
        this.id = data.id
        this.name = data.name
        this.caffeine = data.caffeine
        this.comments = []

        this.card = new DrinkCard(this, this.comments)

    }

    // Searches allDrinks Array and finds drink by id //
    static findById(id) {
        return allDrinks.find(drink => drink.id === id)
    }

    // Delete function to Delete from API //
    delete = () => {
        api.deleteDrink(this.id)
        delete this
    }

    render(element) {
        // this method will render each card; el is a reference to a DOM node
        console.log(element)
        element.appendChild(this.card.cardContent);

    }
}

DrinkCard 类

class DrinkCard {
    constructor(drink, comments) {
        // Create Card //
        const card = document.createElement('div')
        card.setAttribute("class", "card w-50")
        main.append(card)
        card.className = 'card'

        // Add Nameplate //
        const drinkTag = document.createElement('h3')
        drinkTag.innerText = drink.name
        card.append(drinkTag)

        // Add CaffeinePlate //
        const caffeineTag = document.createElement('p')
        caffeineTag.innerText = `Caffeine Amount - ${drink.caffeine}`
        card.append(caffeineTag)

        // Adds Create Comment Input Field //
        const commentInput = document.createElement("input");
        commentInput.setAttribute("type", "text");
        commentInput.setAttribute("class", "input-group mb-3")
        commentInput.setAttribute("id", `commentInput-${drink.id}`)
        commentInput.setAttribute("placeholder", "Enter A Comment")
        card.append(commentInput);

        // Adds Create Comment Button //
        const addCommentButton = document.createElement('button')
        addCommentButton.innerText = "Add Comment"
        addCommentButton.setAttribute("class", "btn btn-primary btn-sm")
        card.append(addCommentButton)
        addCommentButton.addEventListener("click", () => this.handleAddComment())

        // Add Comment List //
        this.commentList = document.createElement('ul')
        card.append(this.commentList)

        comments.forEach(comment => this.addCommentLi(comment))

        // Create Delete Drink Button
        const addDeleteButton = document.createElement('button')
        addDeleteButton.setAttribute("class", "btn btn-danger btn-sm")
        addDeleteButton.innerText = 'Delete Drink'
        card.append(addDeleteButton)
        addDeleteButton.addEventListener("click", () => this.handleDeleteDrink(drink, card))

        // Connects to Drink //
        this.drink = drink

        this.cardContent = card;
    }

    // Helpers //

    addCommentLi = comment => {
        // Create Li //
        const li = document.createElement('li')
        this.commentList.append(li)
        li.innerText = `${comment.summary}`

        // Create Delete Button
        const button = document.createElement('button')
        button.setAttribute("class", "btn btn-link btn-sm")
        button.innerText = 'Delete'
        li.append(button)
        button.addEventListener("click", () => this.handleDeleteComment(comment, li))
    }

    // Event Handlers //
    // Handle Adding Comment to the DOM //
    handleAddComment = () => {
        const commentInput = document.getElementById(`commentInput-${this.drink.id}`)
        api.addComment(this.drink.id, commentInput.value)
            .then(comment => {
                commentInput.value = ""
                const newComment = new Comment(comment)
                Drink.findById(newComment.drinkId).comments.push(newComment)
                this.addCommentLi(newComment)
            })
    }

    // Loads last comment created for drink object //
    handleLoadComment = () => {
        const newComment = this.drink.comments[this.drink.comments.length - 1]
        this.addCommentLi(newComment)
    }

    // Deletes Comment from API and Removes li //
    handleDeleteComment = (comment, li) => {
        comment.delete()
        li.remove()
    }

    // Deletes Drink from API and Removes drink card //
    handleDeleteDrink = (drink, card) => {
        drink.delete()
        card.remove()
    }
}

Answer 1

有几种方法可以做到这一点:

1. 将引用传递给要在其中附加饮料卡的 DOM 节点
2. 从卡片中获取原始 HTML 并根据需要将其添加到元素

对于 (1)，尝试以下更改:

DrinkCard.js

class DrinkCard {
    constructor(drink, comments) {
         // your existing code
         this.cardContent = card; // or card.innerHTML
    }
}

Drink.js

class Drink {
   // your existing code

   render(el) {
      // this method will render each card; el is a reference to a DOM node
      el.appendChild(this.card.cardContent);

   }
}

最后，将 DOM 引用传递给已排序的条目:

const node = document.getElementById('rendered-content'); // make sure this exists

sortedArray.forEach(card => card.render(node));

希望这能为您提供一些关于如何根据您的目的渲染卡片的指示。

更新

您收到的错误是由于以下原因:

1. 首先，正如您所指出的，一个带有 id 的元素rendered-content在您的 DOM 中不存在
2. 使用 .card追加呈现的元素会导致循环错误，因为您正试图将元素 ( .card) 追加到同一元素。

您可以尝试以下方法:

1. 添加<div id="rendered-content"></div>在您的 HTML 中某处需要呈现排序的卡片
2. 如果您不希望它一直出现在 HTML 页面中，您可以在传递它的引用之前创建它。所以，

const rc = document.createElement('div');
rc.setAttribute('id', 'rendered-content');
document.body.appendChild(rc);

const node = document.getElementById('rendered-content');
sortedArray.forEach(card => card.render(node));

这应该有助于消除错误。

进一步说明

我将简要介绍一下浏览器渲染及其在这种情况下的工作原理。我还将留下一篇更深入的详细文章的链接。

在渲染流程中，会发生以下情况:

1. 您的 HTML 文档由浏览器检索并解析
2. 然后根据解析的文档创建 DOM 树
3. 布局应用于 DOM (CSS)
4. 将 DOM 的内容绘制到显示器上

您的代码几乎处理了原始帖子中的所有内容。您创建了卡片，添加了内容并根据饮料类型对卡片进行了排序。唯一缺少的步骤是将它全部添加到 DOM。

如果您像在 DrinkCard 中那样动态创建元素类，您需要将其附加到现有的 DOM。否则，浏览器无法知道您的卡片在 DOM 中。一旦您修改了 DOM，就会触发布局和重新绘制，然后在显示屏上显示您的内容。

div的目的|与 id='rendered-content'是提供一个存在于您的 DOM 中或在您使用它之前添加的容器。当您向 DOM 添加节点时，您需要一个要添加新节点的引用元素。此引用很容易是 document.body .在这种情况下，render方法会将卡片添加到您的 body 底部在你的 DOM 中。在这种情况下提供一个单独的容器可以让您更好地控制如何显示该容器。

这里深入讨论了渲染及其在浏览器中的工作方式 here .希望解释能回答您的问题。