Question

当我点击按钮时，会添加一个类，并且文本会从＆＃34;取消联系＆＃34;工作。＆＃34;工作。＆＃34;但是，当我在＆＃34;工作状态下再次点击该按钮时，＆＃34;文字没有改回＆＃34;取得联系。＆＃34;为什么它不起作用？

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

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

});

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

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


    });

基本上使用一个事件监听器，因为在原始状态下，两个函数都被调用。

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

＆＃13;

jQuery('#contact-button').click(function (e) {
    e.preventDefault();
    jQuery(this).toggleClass('work-button').text(function (i, text) {
        return text === 'Work' ? 'Get in touch' : 'Work';
    });
});

＆＃13;

#contact-button {
    background: #000;
    background-size: 24px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>

＆＃13;

或者使用像.on()这样的动态选择器，但这并不优雅：）

Answer 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");

});

通过jQuery更改文本来创建div切换单词？

4 个答案: