通过 jQuery 更改文本来制作 div 切换单词？答案

【问题标题】：Make a div toggle words by changing the text via jQuery?通过 jQuery 更改文本来制作 div 切换单词？
【发布时间】：2015-01-06 11:53:33
【问题描述】：

当我单击按钮时，会添加一个类，并且文本从“获取联系”变为“工作”。但是，当我再次单击处于“工作状态”的按钮时，文本不会变回“取得联系”。为什么它不起作用？

小提琴：http://jsfiddle.net/cLgkwjhb/

HTML

<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;
}

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');

});

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

如果点击次数可以被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>

【讨论】：

这看起来是个不错的解决方案，但我需要添加该类，因为我计划稍后进行一些 CSS 更改。
@J82 - 如果是这种情况，你可以这样做----> Fiddle.
@J82 - 不客气！很高兴听到这个消息。
只有一期。我有它，以便某些 div 淡入淡出，具体取决于按钮所处的状态（即工作、联系）。使用您的方法，如果我反复快速单击#contact-button，则在我停止单击以弥补我单击的次数后，div 会淡入淡出。有没有办法解决这个问题？
@J82 - Here you go，诀窍是在#primary 和#contact-keebs 上都使用.finish() 和.stop()，然后再添加更多fadeIn 或fadeOut 动画。

【解决方案2】：

你可以这样做：

fiddle

    var work = false;
    jQuery('#contact-button').click(function( e ){

        e.preventDefault();
        work = !work;
        jQuery(this).toggleClass('work-button').text(work ? 'Work' : 'Get in touch');


    });

基本上使用一个事件侦听器，因为在您的原始版本中，两个函数都被调用。

【讨论】：

专业解决方案！

【解决方案3】：

它不起作用仅仅是因为当您设置该点击处理程序时#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() 这样的动态选择器，但这不是那么优雅:)

【讨论】：

【解决方案4】：

试试这个：- http://jsfiddle.net/cLgkwjhb/5/

jQuery('#contact-button').click(function( e ){

    e.preventDefault();
    jQuery(this).toggleClass('work-button');

    if ($(this).text() == "Work")
       $(this).text("Get in touch")
    else
       $(this).text("Work");

});

【讨论】：