JQuery: Nesting Letter Transform Function

This is the code: If you click the first div, the letters from #one and #two start moving. That's exactly how it should look like. But then: If you want to get the previous state,

Solution 1:

You can add click event on #two to do that as below -

$('#two').click(function() {
if (isRandom) {
  isRandom = false;
  $('span').each(function() {
    $(this).css({
      "position": "relative"
    });
    $(this).animate({
      left: 0,
      top: 0,
    });
  });
}
});

Final code (I have extracted into functions for better understanding) -

$(document).ready(function() {
  var isRandom = false;
  $('#one, #two').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>' + chars.join('</span><span>') + '</span>';
  });

  $('#one').click(function() {
    isRandom = !isRandom;
    if (isRandom) {
      fly();
    } else {
      restore();
    }
  });

  $('#two').click(function() {
    if (isRandom) {
      isRandom = false;
      restore();
    }
  });

  function fly() {
    $('span').each(function() {
      $(this).css({
        "position": "absolute"
      });
      $(this).animate({
        left: Math.random() * window.outerWidth / 2,
        top: Math.random() * window.outerHeight / 2,
      });
    });
  }

  function restore() {
    $('span').each(function() {
      $(this).css({
        "position": "relative"
      });
      $(this).animate({
        left: 0,
        top: 0,
      });
    });
  }
});

html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 20px;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>

Solution 2:

You can simply change your selector to some class which is same to all divs then inside event handler you just need to check if the div which is clicked has id has one using && if yes then only if part will get executed .

Demo Code :

$(document).ready(function() {
  var isRandom = false;
  $('#one, #two').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>' + chars.join('</span><span>') + '</span>';
  });
  //chnage slector
  $('div.sameclass').click(function() {
    isRandom = !isRandom;
    //check if the div which is clicked has id one..
    if (isRandom && $(this).attr("id") == "one") {
      $('span').each(function() {
        $(this).css({
          "position": "absolute"
        });
        $(this).animate({
          left: Math.random() * window.outerWidth / 2,
          top: Math.random() * window.outerHeight / 2,
        });
      });
    } else {
      $('span').each(function() {
        $(this).css({
          "position": "relative"
        });
        $(this).animate({
          left: 0,
          top: 0,
        });
      });
    }
  });
});

html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 20px;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="one" class="sameclass">Click me</div>
<div id="two" class="sameclass">Flying letters based on #one</div>
<div class="sameclass">No flying letters</div>