Disable Selected And Other Objects In Javascript

I have this door open/close script made from HTML, CSS, and JavaScript which I got from here. My question is how can I disable/prevent from clicking/closing again the same selected

Solution 1:

Updated and fixed :

• In JQuery you can just use the .off() method on the main to remove the click event. Ex: $('section.container').off("click");
• In pure javascript (vanilla) you can just use the removeEventListener() method. Ex: document.querySelector('section.container').removeEventListener('click', function(event) {}, false);

You can take a look at my fixed CodePen.

for (var i = 1; i < 30; i++) {
  $('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}

$('section.container').on('click', '.doorFrame', (event) => {
  $('section.container').off("click");
  
  let doorFrame = $(event.currentTarget);
  doorFrame.find('.swing').toggleClass('flipped');
});

body {
  font-family:sans-serif;
}

.container {
  background-color: tan;
  perspective: 5000px;
  margin: 100px;
}

.container:after {
  content: "";
  display: table;
  clear: both;
}

.doorFrame {
  width: 80px;
  height: 130px;
  margin: 10px;
  float: right;
  background-color:brown;
  color:#fff;
  padding:5px5px2px5px;
}

.door {
  width:100%;
  height:100%;
  text-align:center;
  cursor:pointer;
  box-shadow: 0000rgba(0,0,0,0);
  transform-style: preserve-3d;
  transition: transform .5s, box-shadow .5s;
  transform-origin: right center; 
}

.door:hover {
  outline:3px solid white;
}

.doorfigure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.door.front {
  background-color:green;
  width:80px;
  height:130px;
}

.door.back {
  transform: rotateY( 180deg);
}

.doorimg {
  width:100%;
  height:100%;
}

.door.flipped {
 transform: rotateY( 120deg);
  box-shadow: 0015px1pxrgba(0,0,0,.75);
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><sectionclass="container group"><divclass="doorFrame"id="c0"><divclass="door swing"><figureclass="front"><imgsrc="http://www.sharecg.com/images/medium/11603.jpg"></figure><figureclass="back"><imgsrc="http://www.sharecg.com/images/medium/11603.jpg"></figure></div></div></section>

Solution 2:

The simple solution is to just use one

-- edit --

Replaced .one with .on, anded a call to .off in the function handler to conform with your specifications

//edit - using on instead of one
$('.doorFrame').on('click',function(event){
  console.log('click');
  //edit - removing listener for all doorFrames
  $('.doorFrame').off('click', this);
  var doorFrame = $(event.currentTarget)
  // open door
  doorFrame.find('.swing').toggleClass('flipped');

  // ajax code here
 
});