Execute function if the element was not selected before

Question

When the the div with .redactor class is clicked, check if it is already as the selected element.

• If it is already selected then do nothing.

• If it is newly selected then

  1. Execute the initialize_redactor() for that current selected div,
  2. And execute the destroy_redactor() if there was any div which was previously selected.

• And while any of the .redactor div is selected, if clicked other than the .redactor div, then execute destroy_redactor() for the currently selected .redactor div.

Sample in codepen.io

html:

<div id="toolbar_wrapper">
  <div id="toolbar">
  </div>
</div>

<div id="content">
  <div class="redactor">
    <h1>Header</h1>
    <p>Paragraph</p>
  </div>

  <div class="redactor">
    <h1>Another Header</h1>
    <p>Another Paragraph</p>
  </div>
</div>

Answer 1

You should loop through every ".redactor" element and run destroy_redactor on the selected element:

$('.redactor').on("click", function() {
    $(".redactor").each(function () {
        if($(this).hasClass("selected"))
        {
             destroy_redactor(current_edit);
             $(this).removeClass("selected");
        }
    });

    $(this).addClass("selected");
    current_edit = $(this);
    initialize_redactor(current_edit);
});

Answer 2

I think you just need to add two more lines to your js

You will destroy ALL .selected AFTER you check if the redactor has a class of selected:

if (!$(this).hasClass("selected")) {
    destroy_redactor($('.selected'));

Then, if it already has the class selected, remove that class

} else {
    $('.selected').removeClass('selected');

Here's the codepen to try it out:

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