CODEWITHSUNDEEP
javascriptjquerycss
J82
J82

Reputation: 8457

Make a div toggle words by changing the text via jQuery?

When I click on the button, a class gets added, and the text changes from "Get in touch" to "Work." However, when I click the button again in its "work state," the text doesn't change back to "Get in touch." Why doesn't it work?

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

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

});

Upvotes: 2

Views: 230

Answers (4)

Weafs.py
Weafs.py

Reputation: 23002

Rather than adding a class you could keep track of clicks, if the click count is divisible by 2((c++ % 2 == 0)), change the text to Work else 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>

Upvotes: 2

Spokey
Spokey

Reputation: 10994

It doesn't work simply because #contact-button.work-button doesn't exist when you set that click handler. Since you add the class later on, jQuery can't match any element with that selector by the time that line of code runs.

What you can do is use all the logic in a single click handler 

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>

Or use a dynamic selector like .on() but that's not as elegant :)

Upvotes: 1

sharif2008
sharif2008

Reputation: 2798

Try this :- 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");

});

Upvotes: 0

webkit
webkit

Reputation: 3369

You could do this:

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


    });

Basically use one event listener, because in your original, both functions are being called.

Upvotes: 2

Related Questions