如何将JavaScript附加到字体真棒图标

时间:2018-06-24 23:11:52

标签: javascript css button font-awesome

我在HTML中有一个fontawesome图标作为按钮,我想使用javascript并触发它的AJAX样式

<a href="#"><i id="heart" class="jam jam-heart-f"></i> Like</a>

这是javascript触发它的尝试-但我没有得到任何后续错误。我尝试将类似尝试发布到PHP页面like.php,以将链接添加到数据库。

$(document).ready(function()
{

$('body').on("click",'#heart',function()
{
    var videoId = "<?php echo $video_id; ?>";


    var A=$(this).attr("id");
    var B=A.split("like");
    var messageID=B[1];
    var C=parseInt($("#likeCount"+messageID).html());


       $.ajax({
    method: 'POST',
    url: 'like.php',
    data: {videoId: videoId},
    cache: false,
        success: function(result){
            likeInfo = JSON.parse(result);
                    $("#likeCount1").html("Likes:" + likeInfo.likeCount);

            //document.getElementById("likeCount1").value = likeInfo.likeCount;
            //$("#likeCount1").html(likeCount);
        }

        }); 



    }


});

我不认为#heart似乎是由带有字体真棒图标的id =“ heart”在JS中触发的。有什么想法我可以将其组装在一起

2 个答案:

答案 0 :(得分:1)

您的代码正确触发了后请求,但是您没有正确关闭函数和作用域。

我在这里尝试过: http://jsfiddle.net/4cohrz5p/

以及使stackoverflow满意的代码:

$(document).ready(function() {

      $('body').on("click", '#heart', function() {
          var videoId = "<?php echo $video_id; ?>";


          var A = $(this).attr("id");
          var B = A.split("like");
          var messageID = B[1];
          var C = parseInt($("#likeCount" + messageID).html());


          $.ajax({
            method: 'POST',
            url: 'like.php',
            data: {
              videoId: videoId
            },
            cache: false,
            success: function(result) {
              likeInfo = JSON.parse(result);
              $("#likeCount1").html("Likes:" + likeInfo.likeCount);

              //document.getElementById("likeCount1").value = likeInfo.likeCount;
              //$("#likeCount1").html(likeCount);
            }
          });
      });
});

此外,javascript控制台显示您代码的Uncaught SyntaxError: missing ) after argument list。然后,当您单击“心脏”以查看传出的请求并可以检查它们以查看它们是否发送了正确的数据(以及响应!)时,可以打开“网络”标签。

任何体面的js编辑器甚至在运行代码之前都会显示此错误。尝试VS Code。免费,轻巧,总体上很棒。

答案 1 :(得分:1)

您忘记为$('body')。on ...语句添加右括号和分号

尝试一下:

z["bg"]="blue"