jquery: replace text and reset on click

Question

I've got a 3 items that are clickable and need to have the text changed on click.

the HTML

<div class="aaa">
  <p class="bbb">Hello</p>
</div>
<div class="aaa">
  <p class="bbb">Hello</p>
</div>
<div class="aaa">
  <p class="bbb">Hello</p>
</div>

and the jQuery

$('.aaa').on("click", function() {
  $('.bbb', this).text(function(_, oldText) {
    return oldText === 'Hello' ? 'Goodbye' : 'Hello';
  });
  return false;
});

My problem is I need to 'reset' the text if I click a different item. What do I need for this?

Here's the work so far on CodePen - http://codepen.io/sturobson/pen/zbunG

Answer 1

You can add data-* attribute to the elements and store the original texts in those attributes;

<div class="aaa">
  <p class="bbb" data-text='Hello'>Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-text='Hello'>Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-text='Hello'>Hello</p>
</div>

$('.aaa').on("click", function() {
   $('.bbb', this).text(function(_, oldText) {
       return oldText === 'Hello' ? 'Goodbye' : 'Hello';
   }).parent().siblings().find('.bbb').text(function(){
       return $(this).data('text');
   });
   return false;
});

http://codepen.io/anon/pen/LDudE

Answer 2

I recommend you make it flexible and use data- attributes so as not to limit the strings to those stored in JS, and also consider performance by not traversing the dom every time.

HTML:

<div class="aaa">
  <p class="bbb" data-original="Hello" data-alternative="Goodbye">Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-original="Hello" data-alternative="Goodbye">Hello</p>
</div>
<div class="aaa">
  <p class="bbb" data-original="Hello" data-alternative="Goodbye">Hello</p>
</div>

JS:

// Store the elems in vars for quicker access
var $aaa = $('.aaa'),
    $bbb = $('.bbb');

// Loop through each click to get the index
$aaa.each(function(index) {
  $(this).on('click', function(e) {
    e.preventDefault();

    // Find the corresponding $bbb using the index of stored var
    var $currBBB = $bbb.eq(index);

    // If the text is the alternative text, do nothing
    if ($currBBB.text() === $currBBB.data('alternative')) {
      return;
    }

    // Otherwise, loop through $bbb's and reset their text to the original
    $bbb.each(function() {
      var $this = $(this);
      $this.text($this.data('original'));
    });

    // Set the relevant $bbb to the alternative text
    $currBBB.text($currBBB.data('alternative'));
  });
});

Working example: http://codepen.io/stowball/pen/uBqlE

Answer 3

Try this: Demo http://jsfiddle.net/ZPaU6/

APIs in use:

• .find - http://api.jquery.com/find/

Rest this should help the cause I reckon :) Code

$('.aaa').on("click", function () {
    $(this).find('.bbb').text(function () {
        return $(this).text() === 'Hello' ? 'Goodbye' : 'Hello';
    });
    return false;
});

Answer 4

Try

$('.aaa').on("click", function () {
    $('.bbb', this).text(function (_, oldText) {
        return oldText === 'Hello' ? 'Goodbye' : 'Hello';
    });
    return false;
});

$('.bbb').each(function(){
    var $this = $(this);
    $this.data('text', $this.text())
})
$('.reset').click(function () {
    $('.bbb').text(function (_, oldText) {
        return $(this).data('text');
    });
})

Demo: Fiddle