javascript - 我无法在我的网站中访问我的问题的正确 ID

Question

嘿，我正在用 meteor 制作一个网站，人们可以在其中添加问题并获得答案。我想为每个问题添加删除功能，以便用户可以删除他们的问题。如果我直接拉出问题的 id 并立即删除它，它就可以了。但是，如果我尝试通过“你确定吗:是/否”之类的引导模式来获取他们的确认，并且希望他们单击​​"is"，则应该删除该问题。但窗口中的第一个问题被删除，而不是该特定问题。

这是我的 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 设置模板中的 block 。

您无法使用的版本存在一些问题:

首先，在你的 #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.