Javascript 如何让安的班级<；i>；标签在页面重新加载时不会更改

我创建了一个ajax收藏夹按钮，当用户单击heart按钮时，信息将被发送到服务器，而无需重新加载，并且使用javascript（与instagram heart按钮完全相同）将心形填充为红色。现在我遇到了一个问题，当页面重新加载时，心脏填充被移除，如何填充每个单独的消息，而不仅仅是第一次

这是我的密码：

我的html代码：

   <a href="" class="msg-icon" onclick="toggle()" >

        <input  type="hidden" name="fav"  value="<?php echo $row['msgid']; ?>" style=""  >

        <i class="far fa-heart" id="favBtn" style="" ></i>
   </a>

---

我如何才能使心脏填充仅在用户再次单击每个消息的按钮时被删除？

我看到您正在使用PHP在页面加载中加载消息的id。我猜在“favBtn”上设置初始CSS类时，您也希望类似的东西。下面的代码片段使用php检查同一$row上的一个字段，并根据该字段选择最初显示的聊天类

<i class="<?php if($row['isFavorite'] {echo "fas";} else {echo "far";}) fa-heart" id="favBtn"></i>

---

<代码> < P>如果这些不可读取的CSS类名来自外部库，请考虑将它们放入具有更易于识别的名称的变量中，并直接使用变量而不是外部名称。

例如：

var heartOutline = 'far'
var heartFilled = 'fas'

function toggle(){
    var btn= document.getElementById("favBtn")
    if(btn.classList.contains(heartOutline)){
        btn.classList.remove(heartOutline)
        btn.classList.add(heartFilled)
    }else{
        btn.classList.remove(heartFilled)
        btn.classList.add(heartOutline)
    }
}

// they got rid of semicolons in JS because they wanted to emulate Python 

---

我已经习惯了在JS中不使用分号。

关于如何使用分号以及具体问题的解释很难理解。

far

和

fas

之间的区别是什么？代码应该是可读的。@charlietfl让我们假设我有很多消息，每条消息都有一个最喜欢的按钮。当用户点击按钮时，心脏会充满，直到用户再次点击按钮。当他点击任何一条信息时，它就会被填满，而不仅仅是第一条信息。因为我使用的是document.getElementById（“”），它只检索第一个实例。我如何才能做到这一点？

onclick=“切换（此）”

<代码>函数切换（元素）{var btn=element.querySelector（'i.fa-heart'））；…您需要将每个类的状态存储在服务器上或本地存储中。然后在页面重新加载时使用该状态设置相应的类。这也意味着每个类都需要一个唯一的标识符来跟踪其状态。我会考虑到这一点，但您知道如何使该类在页面重新加载时不会恢复吗？例如，当用户单击时，它将变为已填充，直到用户再次单击，并且即使在页面完成后，它仍保持填充状态reloads@ChrisJamal我会在服务器上使用AWS DynamoDB来保存按钮的状态。对于保存时的ajax请求，将按钮状态数据保存到数据库中。当第一次在PHP中加载页面时，读取按钮状态数据ta，并将其添加到HTML。因此，在PHP的页面加载中，您已经知道按钮是否按下，并将相应的CSS类添加到按钮。如果有多个按钮，请创建一个唯一的ID。示例：

var heartOutline = 'far'
var heartFilled = 'fas'

function toggle(){
    var btn= document.getElementById("favBtn")
    if(btn.classList.contains(heartOutline)){
        btn.classList.remove(heartOutline)
        btn.classList.add(heartFilled)
    }else{
        btn.classList.remove(heartFilled)
        btn.classList.add(heartOutline)
    }
}

// they got rid of semicolons in JS because they wanted to emulate Python