通过jQuery修改文本来切换单词？
通过jQuery修改文本来切换单词？
提问于 2015-01-06 11:53:33
当我单击按钮时，会添加一个类，文本将从“取得联系”更改为“工作”。但是，当我再次单击“工作状态”按钮时，文本不会更改为“取得联系”。为什么不动呢？
小提琴：http://jsfiddle.net/cLgkwjhb/
<a id="contact-button" href="#">Get in touch</a>CSS
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
}JS
jQuery('#contact-button').click(function( e ){
e.preventDefault();
jQuery(this).addClass('work-button').text('Work');
});
jQuery('#contact-button.work-button').click(function( e ){
e.preventDefault();
jQuery(this).removeClass('work-button').text('Get in touch');
});回答 4
Stack Overflow用户
回答已采纳
发布于 2015-01-06 11:58:49
如果单击计数可被2((c++ % 2 == 0))整除，则可以将文本更改为Work Get in touch，而不是添加可以跟踪单击的类。
var c = 0;
jQuery('#contact-button').click(function(e) {
e.preventDefault();
jQuery(this).text((c++ % 2 == 0) ? 'Work' : 'Get in touch');
});#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
Stack Overflow用户
发布于 2015-01-06 12:02:34
你可以这样做：
var work = false;
jQuery('#contact-button').click(function( e ){
e.preventDefault();
work = !work;
jQuery(this).toggleClass('work-button').text(work ? 'Work' : 'Get in touch');
});基本上使用一个事件侦听器，因为在您的原始版本中，两个函数都被调用。
Stack Overflow用户
发布于 2015-01-06 11:58:36
它不能工作，因为当您设置单击处理程序时，#contact-button.work-button不存在。由于稍后添加了类，所以在代码行运行时，jQuery无法将任何元素与选择器匹配。
您可以做的是在一个单击处理程序中使用所有的逻辑。
jQuery('#contact-button').click(function (e) {
e.preventDefault();
jQuery(this).toggleClass('work-button').text(function (i, text) {
return text === 'Work' ? 'Get in touch' : 'Work';
});
});
jQuery('#contact-button').click(function (e) {
e.preventDefault();
jQuery(this).toggleClass('work-button').text(function (i, text) {
return text === 'Work' ? 'Get in touch' : 'Work';
});
});#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
或者使用像.on()这样的动态选择器，但这并不那么优雅:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27798121
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号