禁用javascript中的选定对象和其他对象

我有一个用HTML、CSS和JavaScript编写的开门/关门脚本，我从中获得了这些脚本

我的问题是如何禁用/防止再次单击/关闭相同的选定门

例如，我将单击第一个门，它将禁用我单击的门，同时也将禁用其余的门。我之所以需要它，是因为我需要在单击其中一扇门后触发一个ajax请求

我的javascript代码：

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

  var doorFrame = $(event.currentTarget)
  // open door
  doorFrame.find('.swing').toggleClass('flipped');

  // ajax code here
 
});

惊喜简单的解决方案是只使用一个

--编辑--

将.one替换为.on，并在函数处理程序中调用.off以符合您的规范

//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
 
});

简单的解决方法是只使用一个

--编辑--

将.one替换为.on，并在函数处理程序中调用.off以符合您的规范

//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
 
});

更新和修复：

在JQuery中，您只需使用main上的.off（）方法来删除click事件

例如：
$（'section.container'）。关闭（“单击”）

在纯javascript（香草）中，您只需使用removeEventListener（）方法

例如：
document.querySelector（'section.container'）。removeEventListener（'click'，函数（事件）{}，false）


你可以看看我的修好的


for（变量i=1；i<30；i++）{
$（'#c0'）.clone（）.appendTo（'.container'）.attr（'id'，'c'+i）；
}
$（'section.container'）。在（'click'，'.doorFrame'，（event）=>{
$（'section.container'）。关闭（“单击”）；
让门框=$（event.currentTarget）；
门框.find（'.swing'）.toggleClass（'flipped'）；
});
正文{
字体系列：无衬线；
}
.集装箱{
背景颜色：棕褐色；
前景：5000px；
利润率：100像素；
}
.货柜：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.门框{
宽度：80px；
高度：130像素；
利润率：10px；
浮动：对；
背景颜色：棕色；
颜色：#fff；
填充物：5px 5px 2px 5px；
}
.门{
宽度：100%；
身高：100%；
文本对齐：居中；
光标：指针；
长方体阴影：0 rgba（0,0,0,0）；
变换样式：保留-3d；
过渡：变换.5s，盒影.5s；
变换原点：右中心；
}
.门：悬停{
外形：3倍纯白；
}
.门图{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.门，前面{
背景颜色：绿色；
宽度：80px；
高度：130像素；
}
.门，后面{
变换：旋转（180度）；
}
.车门img{
宽度：100%；
身高：100%；
}
.门翻了{
变换：旋转（120度）；
盒影：0.15px 1px rgba（0,0,0,75）；
}

已更新和修复：

在JQuery中，您只需使用main上的.off（）方法来删除click事件

例如：
$（'section.container'）。关闭（“单击”）

在纯javascript（香草）中，您只需使用removeEventListener（）方法

例如：
document.querySelector（'section.container'）。removeEventListener（'click'，函数（事件）{}，false）


你可以看看我的修好的


for（变量i=1；i<30；i++）{
$（'#c0'）.clone（）.appendTo（'.container'）.attr（'id'，'c'+i）；
}
$（'section.container'）。在（'click'，'.doorFrame'，（event）=>{
$（'section.container'）。关闭（“单击”）；
让门框=$（event.currentTarget）；
门框.find（'.swing'）.toggleClass（'flipped'）；
});
正文{
字体系列：无衬线；
}
.集装箱{
背景颜色：棕褐色；
前景：5000px；
利润率：100像素；
}
.货柜：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.门框{
宽度：80px；
高度：130像素；
利润率：10px；
浮动：对；
背景颜色：棕色；
颜色：#fff；
填充物：5px 5px 2px 5px；
}
.门{
宽度：100%；
身高：100%；
文本对齐：居中；
光标：指针；
长方体阴影：0 rgba（0,0,0,0）；
变换样式：保留-3d；
过渡：变换.5s，盒影.5s；
变换原点：右中心；
}
.门：悬停{
外形：3倍纯白；
}
.门图{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.门，前面{
背景颜色：绿色；
宽度：80px；
高度：130像素；
}
.门，后面{
变换：旋转（180度）；
}
.车门img{
宽度：100%；
身高：100%；
}
.门翻了{
变换：旋转（120度）；
盒影：0.15px 1px rgba（0,0,0,75）；
}

你是什么意思？但它不会禁用其他门，在我打开一个更新的问题谢谢你之后，我再次尝试了你的更新，但它仍然不会禁用其余的门。还有，我可以关上门，这是不会发生的，它会一直开着你说的一扇门是什么？但它不会禁用其他门，在我打开一个问题更新后谢谢，我再次尝试了你的更新，它仍然不会禁用其余的门。而且，我可以把门关上，这是不会发生的，它会一直开着。我没有把门打开，我犯了一个错误。我把它修好了，现在它应该按照你想要的方式工作了。->如果你点击一扇门，它将保持打开状态，而你不能点击另一扇门。这不是将门翻转到openMy bad，我犯了一个错误。我把它修好了，现在它应该按照你想要的方式工作了。->如果您单击一扇门，它将保持打开状态，而您无法单击另一扇门。