Toggle text stored in data attribute on a click event

Question

So I am trying to get the text in the button to toggle between strings stored in the data attributes:

<button class="toggleButton6 book1" data-starttext="Starting Text" data secondtext="Toggled Text">Starting Text</button>

So far I can get the text to change only for the first click event. I need to add something to get the text to toggle back and forth with unlimited click events:

$(document).ready(function(){
  $('.book1').on('click', function(){
    var textVariable = $(this).data("secondtext");
    $(this).text(textVariable);
  });
});

http://codepen.io/nigelNSF/pen/Dfpak

Possible typo in your code: data secondtext. Should be data-secondtext — j08691
– j08691, Commented Jun 7, 2013 at 16:44

Selvakumar Arumugam · Accepted Answer · 2013-06-07 16:54:30Z

8

You don't need 2 data as you have the firsttext as button.text(), so change your html like below to have just 1 data.. lets say toggletext

<button class="toggleButton6 book1" data-toggletext="Toggled Text" >Starting Text</button>

And then toggle the value of toggletext and button.text() in the script like below,

$(document).ready(function(){
  $('.book1').on('click', function(){
        var textVariable = $(this).data("toggletext");          
        $(this).data('toggletext', $(this).text()).text(textVariable);

  });
});

DEMO: http://codepen.io/seraphzz/full/IJLBi

edited Jun 7, 2013 at 16:54

answered Jun 7, 2013 at 16:46

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wojciech Jasiński · Accepted Answer · 2013-06-07 16:45:29Z

0

$(document).ready(function(){
  $('.book1').on('click', function(){
    if ($(this).text() == $(this).attr('data-starttext'))
        $(this).text($(this).attr('data-secondtext'));
    else 
        $(this).text($(this).attr('data-starttext'));
  });
});

answered Jun 7, 2013 at 16:45

Wojciech Jasiński

1,4782 gold badges20 silver badges42 bronze badges

Comments

Joe · Accepted Answer · 2013-06-07 16:51:45Z

0

try this:

$(document).ready(function(){
  $('.book1').on('click', function(){
      var textVariable = $(this).data("secondtext");
      var temp = $(this).text();
      $(this).text(textVariable).data("secondtext", temp);
  });
});

edited Jun 7, 2013 at 16:51

Joe

15.6k8 gold badges51 silver badges57 bronze badges

answered Jun 7, 2013 at 16:45

Pavel

1,64715 silver badges12 bronze badges

Comments

dsummersl · Accepted Answer · 2013-06-27 02:13:41Z

0

As everybody else says: you must check the state of the text by comparing it to starttext or secondtext and explicitly setting the value of your text field accordingly.

$(document).ready(function(){
  $('.book1').on('click', function(){
    var second = $(this).data("secondtext");
    var start = $(this).data("starttext");
    if (second === $(this).text()) {
      $(this).text(start);
    } else {
      $(this).text(second);
    }
  });
});

Here is a working example.

answered Jun 27, 2013 at 2:13

dsummersl

6,79753 silver badges67 bronze badges

Collectives™ on Stack Overflow

Toggle text stored in data attribute on a click event

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related