尽管自动刷新页面，但当我点击它时隐藏跨度答案

【问题标题】：hide span when i click on it despite the automatic page refresh尽管自动刷新页面，但当我点击它时隐藏跨度
【发布时间】：2017-05-23 21:01:40
【问题描述】：

html (quotazioni.php)

<?php 
    $azioni = $db_handle->runQuery("SELECT idAzione,nome,prezzo FROM azioni");
    foreach($azioni as $azione){
?>          

                        <tr>
                            <td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><a href="azione.php?idAzione=<?=$azione["idAzione"]?>"><?php echo $azione["nome"]; ?></a></td>
                            <td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["prezzo"]; ?></td>
                            <td style="text-align:center;border-bottom:#F0F0F0 1px solid;">
                                <a href="compraVendi.php?action=segui&idAzione=<?=$azione["idAzione"]?>" id="<?=$azione["nome"]?>" style="text-decoration:none;" class="preferiti" >
                                    <span style="color:yellow;font-size:200%;" id="<?=$azione["idAzione"]?>" >&star;</span>
                                </a>
                            </td>
                        </tr>
<?php 
    }
?>

php (compraVendi.php)

case "segui":
            $db_handle->query("INSERT INTO preferiti (visibile,idAzione) VALUES (1,'".$_GET["idAzione"]."')");  
            header("location: quotazioni.php");
            break;

javascript

    $(document).ready(function(){
    <?php
        $preferiti = $db_handle->runQuery("SELECT * FROM preferiti");
        foreach($preferiti as $preferito){
            if ($preferito["visibile"]==1){ 
    ?>          
            var element = document.getElementById(<?=$preferito["idAzione"]?>);
            element.hide();
    <?php
            }
        }
    ?>
});

点击后我必须隐藏链接内的跨度。考虑到页面包含自动刷新，如何保持禁用跨度？我提供了一个不起作用的代码示例，请帮助我解决问题。在sql数据库中，表preferiti包含idPreferito、visibile和idAzione。如果我单击相应的首选，则首选行包含 1。

【问题讨论】：

先试一试，然后写一个尝试。当您遇到困难时，发布您迄今为止尝试过的内容，然后寻求帮助
我已经尝试了很多次来做我在不同网站上寻找的东西，但我无法解决这个问题。这就是为什么我没有尝试就没有输入干净的代码。我需要 2 个我做不到的 javascript 功能。
嗯，你试过什么？
您应该提供一个简短的可行示例，说明您已经拥有什么以及您想要实现什么。这一大块代码没有帮助。尝试封装问题。
听起来像是 cookie 的工作：developer.mozilla.org/en-US/docs/Web/API/Document/cookie

标签： javascript php jquery sql

【解决方案1】：

当用户点击星号时 - 您需要将此数据保存到持久存储中，例如您的后端。这是您在页面刷新后能够恢复此状态的唯一方法。

所以在向客户端提供页面时，您会考虑另一个字段，例如'disabled'，其中包含字符串'disabled'

可能是这样的：

<a href="#" id="<?=$azione["nome"]?>" class="preferiti" >
    <span class="favourites-star <?=$azione["disabled"]?>" id="<?=$azione["idAzione"]?>" >&star;</span>
</a>

考虑不使用内联样式，而是使用类进行样式设置 - 这是一种普遍的良好做法。

.favourites-star {
    color:yellow;
    font-size:200%;
}

类在处理事件时也更好。

$(document).ready(function(){
    $('.prefereti').on('click', function(evt){
        // Save the state first and then disable the star - try it yourself!
        $.post()
            .done(function () {
                 $(evt.currentTarget).addClass('disable');
            })
            .fail(function () {
                 // Don't disable - instead show error
            });
    });
});

在保存状态时您需要记住的另一件事是，您的页面可能会重新加载 - 因此您可能希望在这段时间内禁止它重新加载。

【讨论】：