Question

所以我有一个心形图标，当你将鼠标悬停在它上面时会发生变化。它逐渐消失，而不是中风。现在，对于我的项目，如果你已经喜欢它的心脏，它默认为粉红色。所以我计划做的是检查用户是否喜欢它然后提高不透明度。因为实体图标在悬停时从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';
}

那就是心中的风格属性。那我该怎么做呢？我似乎无法通过显示HTML的替代if else语句来解决这个问题。

Answer 1

无法修改DOM样式，例如单独使用PHP时的不透明度。您可能希望使用Javascript执行此操作。我一直这样做的一种方法是简单地以类似于：

的方式调用一段Javascript代码

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

我希望这会有所帮助。：）

注意：我改变了原来的帖子，因为我发现它有错误。

Answer 2

加载页面时需要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帖子。

用PHP改变CSS不透明度

2 个答案: