创建喜欢不喜欢的功能喜欢instagram

时间:2020-04-04 16:49:32

标签: javascript php svg

我正在创建一个社交网络网站,现在我正在研究不喜欢的功能,这是我的脚本

<div class="container">
   <?php foreach($posts as $post): ?>
   <?php if(userLiked($post['post_id'])): ?>
   <svg class="solid-heart heart" aria-hidden="true" focusable="false" data-prefix="fas"  data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="red" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path>
   </svg>
   <?php else: ?>
   <svg class="regular-heart heart" aria-hidden="true" focusable="false" data-prefix="far" data-id="<?php echo $post['post_id']; ?>" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="red" d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"></path>
   </svg>
   <?php endif; ?>
   <?php endforeach ?>
</div>

基本上我想要当我单击SVG图像常规心脏..然后应将其替换为SVG图像常规心脏...并将值发送到数据库,这是我的javascript代码

$(document).ready(function () {
    $('.heart').on('click', function () {
        var post_id = $(this).data('id');
        $clicked_btn = $(this);
        if ($clicked_btn.hasClass('regular-heart')) {
            action = 'like';

        }
        else if ($clicked_btn.hasClass('solid-heart')) {
            action = 'unlike';

        }
        $.ajax({
            type: 'post',
            url: 'index.php',
            data: { 'action': action, 'post_id': post_id },
            success: function (data) {
                $('#error').html(data);

                if (action == 'like') {
                    $clicked_btn.removeClass('regular-heart');
                    $clicked_btn.addClass('solid-heart');
                } else if (action == 'unlike') {
                    $clicked_btn.removeClass('solid-heart');
                    $clicked_btn.addClass('regular-heart');
                }
            }
        })
    })
})

当我单击常规心脏时,就会出现问题,它不会变为坚实的心脏。请通过代码帮助我实现此功能

0 个答案:

没有答案