我无法在我的网站上访问我的问题的正确标识

Question

嘿，我正在制作一个流星网站，人们可以在其中添加问题并获得答案。我想为每个问题添加一个删除功能，以便用户可以删除他们的问题。如果我直接提取问题的id并立即删除它，它就会起作用。但是，如果我尝试通过引导模式（如“您确定：是/否”）进行确认，并希望如果他们单击是，则应删除该问题。但不是那个特别的问题，窗口中的第一个问题被删除。

这里是我的html代码：

<template> 
    <div class="container margin-top"> 
     <div class="row"> 
      {{#each ques}} 
       <div class="col-xs-12" id="{{_id}}"> 
        <div class="thumbnail"> 
         <div class="caption"> 
          <h3><span>Q.</span> {{ques}}</h3> 
          <p> 
           <span><b><i>Ans.</i></b></span> 
           <span>{{&gt; editableText collection="ques" field="ans"}}</span> 
          </p> 
          <button class="js-show-del-ques">Delete</button> 
          <div class="modal fade" id="ques_del_form"> 
           <div class="modal-dialog"> 
            <div class="modal-content"> 
             <div class="modal-header"> 
              <div class="modal-title"> 
               <h1>Are you sure?</h1> 
              </div> 
             </div> 
             <div class="modal-body"> 
              <button class="js-del-ques">Delete</button> <button class="" data-dismiss="modal">cancel</button> 
             </div> 
             <div class="modal-footer"></div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      {{/each}} 
     </div> 
    </div> 
</template> 

这里是我的js代码：

Template.ques.events({ 
    'click .js-show-del-ques': function(event) { 
     $("#ques_del_form").modal('show'); 
    }, 
    'click .js-del-ques': function(event) { 
     var ques_id = this._id; 
     console.log(ques_id); 
     $("#" + ques_id).hide('slow', function() { 
      Ques.remove({ 
       "_id": ques_id 
      }); 
     }) 
     $("#ques_del_form").modal('hide'); 
    }, 
}); 

而如果我不喜欢这样写道：

<template> 
    <div class="container margin-top"> 
     <div class="row"> 
      {{#each ques}} 
       <div class="col-xs-12" id="{{_id}}"> 
        <div class="thumbnail"> 
         <div class="caption"> 
          <h3><span>Q.</span> {{ques}}</h3> 
          <p><span><b><i>Ans.</i></b></span> <span>{{&gt; editableText collection="ques" field="ans"}}</span></p><button class="js-del-ques">Delete</button> 
         </div> 
        </div> 
       </div> 
      {{/each}} 
     </div> 
    </div> 
</template> 

在JS

：

Template.ques.events({ 
    'click .js-del-ques': function(event) { 
     var ques_id = this._id; 
     console.log(ques_id); 
     $("#" + ques_id).hide('slow', function() { 
      Ques.remove({ 
       "_id": ques_id 
      }); 
     }) 
    }, 
}); 

然后它很好地工作，并删除特定的问题。

为什么它不起作用？特定问题没有从模态中删除的原因是什么？

帮助表示赞赏。

谢谢。

Answer 1

在您的版本中，this._id在您的事件处理程序中标识您期望的问题，因为数据上下文（this）由模板中的#each块设置。

你的版本不工作有几个问题：

首先，你#each块内你有<div class="modal fade" id="ques_del_form">。 #each将多次创建此div，将具有相同ID的多个元素放入DOM中。这是无效的，并且是您所看到的行为的根本原因。

你的click .js-show-del-ques事件然后试图找到这个元素来显示适当的模式对话框，但当然有多个这样的副本，在你的情况下，它似乎显示它找到的第一个。尽管这是无效的标记，但是您可能会从其他浏览器获得不同的非标准行为。

更好的办法是将模式对话框移出#each，因为您只需要它的一个副本。请尝试以下操作：

ques.html

<template> 
    <div class="container margin-top"> 
     <div class="row"> 
      {{#each ques}} 
       <div class="col-xs-12" id="{{_id}}"> 
        <div class="thumbnail"> 
         <div class="caption"> 
          <h3><span>Q.</span> {{ques}}</h3> 
          <p> 
           <span><b><i>Ans.</i></b></span> 
           <span>{{&gt; editableText collection="ques" field="ans"}}</span> 
          </p> 
          <button class="js-show-del-ques">Delete</button> 
         </div> 
        </div> 
       </div> 
      {{/each}} 
     </div> 
     <div class="modal fade" id="ques_del_form"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <div class="modal-title"> 
          <h1>Are you sure?</h1> 
         </div> 
        </div> 
        <div class="modal-body"> 
         <button class="js-del-ques">Delete</button> <button class="" data-dismiss="modal">cancel</button> 
        </div> 
        <div class="modal-footer"></div> 
       </div> 
      </div> 
     </div> 

    </div> 
</template> 

ques.js

import { ReactiveVar } from 'meteor/reactive-var' 

Template.ques.onCreated(function() { 
    this.SelectedQuestionToDelete = new ReactiveVar(); 
}); 

Template.ques.events({ 
    'click .js-show-del-ques': function(event, template) { 
     template.SelectedQuestionToDelete.set(this._id); 
     $("#ques_del_form").modal('show'); 
    }, 
    'click .js-del-ques': function(event, template) { 
     var ques_id = template.SelectedQuestionToDelete.get(); 
     console.log('deleting ' ques_id); 
     $("#" + ques_id).hide('slow', function() { 
      Ques.remove({ 
       "_id": ques_id 
      }); 
     }) 
     $("#ques_del_form").modal('hide'); 
    }, 
}); 

For an explanation of ReactiveVar see here.