根据查询设置 html 按钮状态

Question

我有一个带有“favourite”按钮的页面，单击该按钮会运行 Ajax post 并相应地更新我的数据库 table“favourite” 用户和图书详细信息。

目前流程如下，

点击按钮一次>将书加入收藏夹table>刷新页面>显示成功div
再次点击按钮>从收藏中删除图书table>刷新页面>显示成功div

我现在想做的是在页面加载时，检查用户是否已经将这本书添加到收藏夹，如果是，请将此按钮的class设置为btn-success（绿色）。

我该如何实现？我是否需要在页面加载时给按钮一个属性并在页面加载时检查它？

我对 php 和 js 很陌生，所以任何建议都将不胜感激。我已经包含了我的代码以供参考。

ajax

$(document).ready(function(){

$( "#fav" ).click(function(){    

book_id = $(fav).val(); // set the value of the button as the book_id

    $.ajax({
         type: 'POST',
         url: '<?php echo URL; ?>books/checkFav',
         data: {book_id:book_id},
         success: function () { 
             window.location.reload(true);
            }//end success        
        });//end ajax   
    });
});

checkFavphp

$bookid=$_REQUEST['book_id']; //get this from ajax
$userid=$_SESSION['user_id']; //get this from session

$sql = "SELECT * FROM favourite WHERE book_id = :book_id AND user_id = :user_id";

   ... //execute

if(empty($rows_found)) {
$sql = "INSERT INTO favourite (book_id, user_id) VALUES (:book_id, :user_id)";

... //execute

} else { 
$sql = "DELETE FROM favourite WHERE book_id = :book_id AND user_id = :user_id";

... //execute       
}

html

echo '<td>
<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button></td>';
echo '</tr>';

Answer 1

您可以做两件事：

创建一个 php 函数来检查它是否已经是最爱和 returns true 或 false 并基于此添加一个 class 到像这样的按钮：

$("#buttonId").addClass("btn-success");
如果您在页面加载时已经有了这些数据，您可以在 html 中添加 php 内联代码，如下所示：

如果（$最爱）{ $class = "btn-success"; }

然后在 html

<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn <?php echo ($book->isFavorite()) ? 'favorite' : '';?>"></button>

Answer 2

这是不正确的：

<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button>

你必须指定你想要 PHP 代码并且你想要 echo $book->id，像这样：

<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn btn-default"></button>

此外，假设您有一个 PHP 函数 isFavorite，那么

<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn btn-default<?php echo ((isFavorite()) ? (" btn-success") : ("")); ?>"></button>

根据查询设置 html 按钮状态

set html button state based on query

html

javascript

php

ajax

jquery