用PHP改变CSS的不透明度 - Change CSS opacity with PHP

Change CSS opacity with PHP

本文关键字：不透明度 CSS 改变 PHP | 更新日期: 2023-09-27

所以我有一个心形图标，当你把鼠标悬停在它上面时它会改变。它渐渐变成一颗饱满的心，而不是中风。现在对于我的项目，如果你已经喜欢的心脏，它将是默认的固体粉红色。所以我打算做的是检查用户是否喜欢它，然后提高不透明度。因为悬停时，实体图标从0.1变为1。问题是我不知道如何设置if else语句。

<div class="post">
<? if($_SESSION['loggedIn'] == true): ?>
<a href="likes.php?id=<?php echo $post['id'];?>">
<div class="icons">
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart" ></i>
</div>
</a>
<? endif; ?>

这是我目前拥有的。我想做的是，如果用户喜欢它，它就是真的。

if(usr_liked == true){
  echo 'opacity: 1';
}

这将位于心脏的style属性中。我该怎么做呢?我似乎无法用替代的if else语句来显示HTML。

不可能修改DOM样式，例如仅使用PHP的不透明度。您可能希望使用Javascript完成此操作。我总是这样做的一种方法是简单地调用一段Javascript代码，类似于:

<?php if (usr_liked == true) { ?>
    <script>
        document.getElementById("heart").style.opacity = 1.0;' .
    </script>';
<?php } ?>

我希望这对你有帮助。:)

注意:我更改了原来的帖子，因为我发现它有一个错误。

加载页面时需要PHP

<? if(usr_liked == true){ ?>
    <i class="heart liked"></div>
<? } else { ?>
    <i class="heart not-liked"></div>
<? } ?>

和jQuery改变类，如果它被点击

<script>
    $('.heart.not-liked').addClass('liked').removeClass('not-liked');
    $('.heart.liked').addClass('not-liked').removeClass('liked');
</script>

你的css应该是

.heart.not-liked {
    color: grey;
}
.heart.liked {
    color: red;
}

jQuery函数可以更好。但它是有效的。注意:jQuery函数不会对数据库做任何操作。您需要为此编写一个AJAX帖子。