使用Javascript制作一个关注按钮

Question

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

$(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");
      });
    }
  }); 
});

#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 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")

您将按钮文本与“+ Follow”进行比较，但您的按钮文本只是“Follow”，因此您的if块将永远不会运行。

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

Answer 4

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

请查看jQuery Easings Main Page了解更多信息。

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

$(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");
      });
    }
  }); 
});

#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>