用Javascript制作follow按钮

我来这里是想了解为什么我的javascript不能用于follow按钮，因为我添加了所有cdn和脚本，但仍然不能工作。我在代码中做错了什么

$（文档）.ready（函数（）{
$（“#跟随按钮”）。单击（函数（）{
如果（$（“#跟随按钮”）.text（）==“+跟随”）{
//***状态更改：更改为以下***
//我们希望按钮能够挤压（或收缩）10像素，作为对点击的反应，并持续100毫秒
$（“#跟随按钮”）.animate（{width:'-=10px'}，100，'easeInCubic'，function（）{}）；
//现在我们希望按钮扩展到它的完整状态
//左平移是为了使按钮保持较长宽度的中心位置
$（“#跟随按钮”）.animate（{width:'+=45px'，left:'-=15px'}，600，'easeInOutBack'，函数（）{
$（“#跟随按钮”）.css（“颜色”，“#fff”）；
$（“#跟随按钮”）。文本（“跟随”）；
//设置背景从白色到绿色过渡的动画。使用JQuery颜色
$（“#跟随按钮”）。设置动画({
背景色：“2EB82E”，
边框颜色：“2EB82E”
}, 1000 );
});
}否则{
//***状态更改：取消跟踪***
//将按钮更改回其原始状态
$（“#跟随按钮”）.animate（{width:'-=25px'，left:'+=15px'}，600，'easeInOutBack'，函数（）{
$（“#跟随按钮”）.text（“+follow”）；
$（“#跟随按钮”）.css（“颜色”，“#3399FF”）；
$（“#跟随按钮”）.css（“背景色”，“#ffffff”）；
$（“#跟随按钮”）.css（“边框颜色”，“#3399FF”）；
});
}
}); 
});
#跟随按钮{
颜色：#3399FF；
字体系列：“Helvetica”；
字号：10pt；
背景色：#ffffff；
边框：1px实心；
边框颜色：#3399FF；
边界半径：3px；
宽度：85px；
高度：30px；
位置：绝对位置；
顶部：50px；
左：50px；
光标：手；
}

遵循
您需要使用jQuery的
html（）
函数，因为
text（）
不会做您认为它应该做的事情-

if（$（“#跟随按钮”）.text（）==“+跟随”）

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

有关获取/设置按钮内容的正确方法，请参见Adam的答案。
代码中的一些问题：

easeInOutBack
未定义，因此使用内置的easing函数=
linear
或
swing

$（“跟随按钮”）.css（“颜色”，“fff”）
将导致文本和背景颜色相同，因此使用
#2EB82E

您可以查看详细信息以了解更多信息

修复后，代码如下所示：


$（文档）.ready（函数（）{
$（“#跟随按钮”）。单击（函数（）{
如果（$（“#跟随按钮”）.text（）==“+跟随”）{
//***状态更改：更改为以下***
//我们希望按钮能够挤压（或收缩）10像素，作为对点击的反应，并持续100毫秒
$（“#跟随按钮”）.animate（{width:'-=10px'}，100，'linear'，function（）{}）；
//现在我们希望按钮扩展到它的完整状态
//左平移是为了使按钮保持较长宽度的中心位置
$（“#跟随按钮”）.animate（{width:'+=45px'，left:'-=15px'}，600'，linear'，function（）{
$（“#跟随按钮”）.css（“颜色”，“2EB82E”）；
$（“#跟随按钮”）。文本（“跟随”）；
//设置背景从白色到绿色过渡的动画。使用JQuery颜色
$（“#跟随按钮”）。设置动画({
背景色：“2EB82E”，
边框颜色：“2EB82E”
}, 1000 );
});
}否则{
//***状态更改：取消跟踪***
//将按钮更改回其原始状态
$（“#跟随按钮”）.animate（{width:'-=25px'，left:'+=15px'}，600'，linear'，function（）{
$（“#跟随按钮”）.text（“+follow”）；
$（“#跟随按钮”）.css（“颜色”，“#3399FF”）；
$（“#跟随按钮”）.css（“背景色”，“#ffffff”）；
$（“#跟随按钮”）.css（“边框颜色”，“#3399FF”）；
});
}
}); 
});
#跟随按钮{
颜色：#3399FF；
字体系列：“Helvetica”；
字号：10pt；
背景色：#ffffff；
边框：1px实心；
边框颜色：#3399FF；
边界半径：3px；
宽度：85px；
高度：30px；
位置：绝对位置；
顶部：50px；
左：50px；
光标：手；
}

遵循
您正在使用的
度量值
未定义，这就是您得到错误的原因

请查看更多信息

我已经修复了您的错误，但我想您的代码在风格和颜色方面仍然需要一些改进


$（文档）.ready（函数（）{
$（“#跟随按钮”）。单击（函数（）{
如果（$（“#跟随按钮”）.text（）==“+跟随”）{
//***状态更改：更改为以下***
//我们希望按钮能够挤压（或收缩）10像素，作为对点击的反应，并持续100毫秒
$（“#跟随按钮”）.animate（{width:'-=10px'}，100，'linear'，function（）{}）；
//现在我们希望按钮扩展到它的完整状态
//左平移是为了使按钮保持较长宽度的中心位置
$（“#跟随按钮”）.animate（{width:'+=45px'，left:'-=15px'}，600'，linear'，function（）{
$（“#跟随按钮”）.css（“颜色”，“#fff”）；
$（“#跟随按钮”）。文本（“跟随”）；
//设置背景从白色到绿色过渡的动画。使用JQuery颜色
$（“#跟随按钮”）。设置动画({
背景色：“2EB82E”，
边框颜色：“2EB82E”
}, 1000 );
});
}
否则{
//***状态更改：取消跟踪***
//将按钮更改回其原始状态
$（“#跟随按钮”）。设置动画({
维特
$("#follow-button").html("Following");