CODEWITHSUNDEEP
javascriptjqueryhtml
Joe W
Joe W

Reputation: 259

How to get text of another element to display

Hello I am trying to change the text of a p tag when the p tag is clicked. At the moment it works I have the following HTML and jQuery

<p class='tile' data-default="Measurable" data-clicked="Some text blah blah." style="text-align: center;">Measurable</p>

<p class='tile' data-default="Unique and
own-able" data-clicked="Some text blah blah." style="text-align: center;">Unique and
own-able</p>

$('.tile').click(function(e) { // when the tile is clicked
    $('.tile').not(this).text($(not(this).attr('data-default'))); // Except the clicked tile all are restored to default data
    $(this).text($(this).attr('data-clicked')); // The clicked tile gets the replacer text
});

When I click on the first p tag it changes the text but the second p tag's default text is changed to Measureable. I understand how it is going wrong because it is getting the clicked p tags instance of data-default and putting it inside the second one. I have tried to change the code to fix it but I end up breaking it.

Upvotes: 0

Views: 53

Answers (1)

billyonecan
billyonecan

Reputation: 20250

You can use .text(function) to set the text to its corresponding data-default:

$('.tile').not(this).text(function() {
  return $(this).data('default');
});

Here's a fiddle

Upvotes: 3

Related Questions