使用Javascript制作一个关注按钮

Question

我在这里得到的答案为什么我的javascript不适用于关注按钮，因为我添加了所有cdn和脚本但仍无法正常工作。我的代码中我做错了什么？

＆＃13;

＆＃13;

$(document).ready(function(){				

  $("#follow-button").click(function(){
    if ($("#follow-button").text() == "+ Follow"){
      // *** State Change: To Following ***      
      // We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms    
      $("#follow-button").animate({ width: '-=10px' }, 100, 'easeInCubic', function () {});
      
      // then now we want the button to expand out to it's full state
      // The left translation is to keep the button centred with it's longer width
      $("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'easeInOutBack', function () { 
        $("#follow-button").css("color", "#fff");
        $("#follow-button").text("Following");

        // Animate the background transition from white to green. Using JQuery Color
        $("#follow-button").animate({
          backgroundColor: "#2EB82E",
          borderColor: "#2EB82E"
        }, 1000 );
      });
    }else{
      
      // *** State Change: Unfollow ***     
      // Change the button back to it's original state
      $("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'easeInOutBack', function () { 
        $("#follow-button").text("+ Follow");
        $("#follow-button").css("color", "#3399FF");
        $("#follow-button").css("background-color", "#ffffff");
        $("#follow-button").css("border-color", "#3399FF");
      });
    }
  }); 
});

＆＃13;

#follow-button {
  color: #3399FF;
  font-family: "Helvetica";
  font-size: 10pt;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #3399FF;
  border-radius: 3px;
  width: 85px;
  height: 30px;
  position: absolute;	 
  top: 50px;
  left: 50px;	
  cursor: hand;		    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>

＆＃13;

＆＃13;

＆＃13;

是否有解决此类错误的解决方案？我试过谷歌但没有答案。我以为你们可以提供帮助。

感谢您的帮助！

Answer 1

您的代码中的一些问题：

1. easeInOutBack未定义，因此使用内置缓动函数= linear或swing

2. $("#follow-button").css("color", "#fff");会导致文字和背景颜色相同，因此请改用#2EB82E。

您可以查看JQuery animate()的详细信息。

修好后，代码如下：

$(document).ready(function(){				

  $("#follow-button").click(function(){
    if ($("#follow-button").text() == "+ Follow"){
      // *** State Change: To Following ***      
      // We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms    
      $("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
      
      // then now we want the button to expand out to it's full state
      // The left translation is to keep the button centred with it's longer width
      $("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () { 
        $("#follow-button").css("color", "#2EB82E");
        $("#follow-button").text("Following");

        // Animate the background transition from white to green. Using JQuery Color
        $("#follow-button").animate({
          backgroundColor: "#2EB82E",
          borderColor: "#2EB82E"
        }, 1000 );
      });
    }else{
      
      // *** State Change: Unfollow ***     
      // Change the button back to it's original state
      $("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'linear', function () { 
        $("#follow-button").text("+ Follow");
        $("#follow-button").css("color", "#3399FF");
        $("#follow-button").css("background-color", "#ffffff");
        $("#follow-button").css("border-color", "#3399FF");
      });
    }
  }); 
});

#follow-button {
  color: #3399FF;
  font-family: "Helvetica";
  font-size: 10pt;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #3399FF;
  border-radius: 3px;
  width: 85px;
  height: 30px;
  position: absolute;	 
  top: 50px;
  left: 50px;	
  cursor: hand;		    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>

Answer 2

您需要使用jQuery的html()函数，因为text()没有按照您认为应该执行的操作 - http://api.jquery.com/text/

$("#follow-button").html("Following");

Answer 3

  

if ($("#follow-button").text() == "+ Follow")

您将按钮文字与＆＃34; +关注＆＃34;进行比较然而你的按钮文字只是＆＃34;关注＆＃34;所以你的if区块永远不会运行。

另请参阅Adam的答案，了解获取/设置按钮内容的正确方法。

Answer 4

您使用的easings未定义，这就是您收到错误的原因。

请查看jQuery Easings Main Page了解详情。

我已经修复了你的错误，但我猜你的代码仍然需要一些改进风格和着色。

＆＃13;

＆＃13;

$(document).ready(function(){				

  $("#follow-button").click(function(){
    if ($("#follow-button").text() == "+ Follow"){
      // *** State Change: To Following ***      
      // We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms    
      $("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
      
      // then now we want the button to expand out to it's full state
      // The left translation is to keep the button centred with it's longer width
      $("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () { 
        $("#follow-button").css("color", "#fff");
        $("#follow-button").text("Following");

        // Animate the background transition from white to green. Using JQuery Color
        $("#follow-button").animate({
          backgroundColor: "#2EB82E",
          borderColor: "#2EB82E"
        }, 1000 );
      });
    }
    else{
      // *** State Change: Unfollow ***     
      // Change the button back to it's original state
      $("#follow-button").animate({
          width: '-=25px',
          left: '+=15px'
        }, 600, 'linear', function () {
        $("#follow-button").text("+ Follow");
        $("#follow-button").css("color", "#3399FF");
        $("#follow-button").css("background-color", "#ffffff");
        $("#follow-button").css("border-color", "#3399FF");
      });
    }
  }); 
});

＆＃13;

#follow-button {
  color: #3399FF;
  font-family: "Helvetica";
  font-size: 10pt;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #3399FF;
  border-radius: 3px;
  width: 85px;
  height: 30px;
  position: absolute;	 
  top: 50px;
  left: 50px;	
  cursor: hand;		    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>

＆＃13;

＆＃13;

＆＃13;