Javascript 发送表单时更改按钮/图标

我试图在Wordpress上创建一个非常简单的心脏按钮插件。这是我的第一个插件之一。我试图做的是，当表单中的按钮被点击时，表单中的图标将被替换/更改为另一个

这是我的密码：

function create_the_heart_button($content){
    global $wpdb;
    $table_name = $wpdb->prefix . 'hearts_table';
    if( is_singular() && in_the_loop() && is_main_query() ){
        $id = get_the_ID();
        $user_id = wp_get_current_user();

        $wpdb->get_results( "SELECT * FROM $table_name WHERE (owner_id = $user_id->ID AND post_id = $id)" );
        if($wpdb->num_rows == 0){
            return $content .
            // next: create a form and add style input type=submit? 
            
            "
            <form method=\"POST\" id=\"heart-btn-form\">   
            <input type=hidden name=heart-btn value=$id>         
            <button id=\"heart-btn\">&#10084;</button>                                  
            </form>";

        } else if(isset($_POST['heart-btn'])) {
        /*when the button is clicked so this happens:  &#128540;*/
        return $content .

        "
        <form id=\"heart-btn-clicked\">   
        <input type=hidden name=heart-btn-clicked value=$id>         
        <button id=\"heart-btn\">&#128540;</button>                                  
        </form>";
    } 
}
return $content;

}

---

目前，尚未提交表单时出现的表情符号为：❤ 我希望它被替换为：对于未来的录制，我这样解决它：

    global $wpdb;
    $table_name = $wpdb->prefix . 'hearts_table';
    if( is_singular() && in_the_loop() && is_main_query() ){
        $id = get_the_ID();
        $user_id = wp_get_current_user();

        $wpdb->get_results( "SELECT * FROM $table_name WHERE (owner_id = $user_id->ID AND post_id = $id)" );
        if($wpdb->num_rows == 0){
            return $content .
            // next: create a form and add style input type=submit? ❤
                        
            "<form method=POST id=\"heart-btn-form\">   
            <input type=hidden name=heart-btn value=$id>                     
            <button id=\"heart-btn\">&#10084;</button>                                   
            </form>";


        }else {
            /*when the button is clicked so this happens:  &#128540;*/
            return $content .
            "<form method=POST id=\"heart-btn-clicked\">   
            <input type=hidden name=heart-btn-clicked value=$id>         
            <button id=\"heart-btn-clicked\">&#128540;</button>                                    
            </form>"; 
        }  
    }
    return $content;
}

---

您可以在用户元数据中保存被单击的值。如果用户单击该按钮，则表单的id和值（例如布尔值true）将保存到数据库中。该按钮将检查用户是否在其元数据中有值，并获取所需的图标。您当前的代码缺少任何数据保存，因此无法正常工作。。。如果用户单击按钮，则需要在某个位置存储信息。否则，系统无法知道用户是否已单击。如果只是暂时的，您可以使用cookie或浏览器存储。一定要把它保存在某个地方。谢谢！我有保存的密码。。也许我也应该把它写在帖子里。函数hearts\u input{global$wpdb；$table\u name=$wpdb->prefix.'hearts\u table'；ifisset$\u POST['hearts-btn']{$POST\u id=$\u POST['heartr-btn']；$user\u id=get\u current\u user\u id；$wpdb->queryINSERT到$table\u nameowner\u id，POST\u id值$user\u id，$POST\u id；}