使用jquery的类似Facebook的按钮_Jquery_Html_Ajax

使用jquery的类似Facebook的按钮

jquery html ajax

使用jquery的类似Facebook的按钮,jquery,html,ajax,Jquery,Html,Ajax,在这里，我试图制作一个类似facebook的按钮。这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> &l

在这里，我试图制作一个类似facebook的按钮。这是我的密码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>like button</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
    #like {
        height: 215px;
        background: url(images/sprite.png) no-repeat;
        background-position: 0px 0px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $("#like").click(function(){
            $("#like").css("background-position","0px -225px");
        });
    });
</script>
</head>
<body>
    <div id="like">
    </div>
</body>
</html>


喜欢按钮
#像{
身高：215px；
背景：url（images/sprite.png）不重复；
背景位置：0px 0px；
}
$（文档）.ready（函数（）{
$（“#like”）。单击（函数（）{
$（“#like”）.css（“背景位置”，“0px-225px”）；
});
});

现在，当用户单击该图标时，图片将发生变化。我想改变这张照片，反之亦然。我该怎么办？有没有其他完美的方法来实现这一点？

定义两个CSS类（一个用于活动状态，第二个用于其他状态），并具有相关的CSS（从精灵图像加载图像）。使用按钮/类似图像单击事件上的按钮。像这样的

CSS

.stateA,.stateB
{
  background-image:url('http://www.wing-co.jp/img/ui/site_skin/default/sprite_facebook.png');
  width:20px;  height:20px;       
}

.stateA
{  
  background-position:-511px -212px;    
}
.stateB
{
  background-position:-498px -212px;    
}

HTML

<input type="button" id="btnLike" class="stateA" value="" />

工作样本：

您已提出6个问题，但未接受任何答案。在stackoverflow上，你的接受率很重要，因为这是人们因所做的工作而获得奖励的方式。请阅读常见问题解答

$(function(){

    $("#btnLike").click(function(e){
      e.preventDefault();
      var item=$(this);
      if(item.attr("class")=="stateA")
      {
         item.removeClass("stateA").addClass("stateB");
         //If you want to update database,you can make an ajax call here
      }
      else
      {
         item.removeClass("stateB").addClass("stateA");
         //If you want to update database,you can make an ajax call here
      }
  });   

});