使用PHP更改CSS不透明度

Question

So I have a heart icon that changes when you hover over it. Its fade into a full heart, instead of a stroke. Now for my project if you already liked the heart it would be solid pink by default. So what I planned on doing was check if the user liked it then raise the opacity. Because the solid icon goes from 0.1 to 1 on hover. The issue is I can't figure out how to set the if else statement.

<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; ?>

That's what I currently have. What I'm trying to do is if the user liked it, it would be true. Then

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

And that would lie in the style attribute in the heart. So how would I do this? I can't seem to figure it out with the alternative if else statement to display HTML.

Answer 1

It's not possible to modify DOM styling, such as opacity in your case with PHP alone. You would want to do this with Javascript. One way that I've always done this is by simply calling a piece of Javascript code in a way similar to:

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

I hope this helps. :)

Note: I changed my original post as there was an error I found with it.

Answer 2

You need PHP when loading the page

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

and jQuery to change class if it is clicked

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

Your css should be

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

.heart.liked {
    color: red;
}

The jQuery function could be better. But it works. Note: the jQuery function does not do anything with the database. You need to write an AJAX post for that.