javascript - 在模态上获取重复数据后，我可以使用编辑操作删除重复数据吗？

Question

我有一个问题，在单击模式后，将从我获取的第一个数据中复制第二个数据，如下图所示:

As you can see, I have two different data, after I click one of those to edit. then this happens

存在问题，您可以看到编辑数据在第二个数据上重复。有 2 个数据具有相同的值。

那么我该如何防止这种情况发生呢？

我的编辑-Ajax

//edit
$('#showdata').on('click', '.item-edit', function(){
        var id = $(this).attr('data');
        $('#myModal').modal('show');
        $('#myModal').find('.modal-title').text('Edit Question');
        $('#myForm').attr('action', '<?php echo base_url() ?>teachers/updateQuestion');
        $.ajax({
            type: 'ajax',
            method: 'get',
            url: '<?php echo base_url() ?>teachers/editQuestion',
            data: {id: id},
            async: false,
            dataType: 'json',
            success: function(data){
                $('input[name=question]').val(data.question);
                $('input[name=choice1]').val(data.choice1);
                $('input[name=choice2]').val(data.choice2);
                $('input[name=choice3]').val(data.choice3);
                $('input[name=answer]').val(data.answer);
            },
            error: function(){
                alert('Could not Edit Data');
            }
        });
    });

Controller

public function editQuestion(){
    $result = $this->teacher_model->editQuestion();
    echo json_encode($result);
}

型号

public function editQuestion(){
    $id = $this->input->get('id');
    $this->db->where('id', $id);
    $query = $this->db->get('quiz');
    if($query->num_rows() > 0){
        return $query->row();
    }else{
        return false;
    }
}

HTML

<!-- Modal -->

<div class="modal fade-scale" id="myModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title">Modal title</h4>
       </div>
       <div class="modal-body">
       <div class="card">
            <div class="card-header">
                <h4>Create a Multiple Choice Question</h4>
            </div>
            <div class="card-body">
                <form>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Question</span>
                        </div>
                        <input type="text" name="question" id="question" class="form-control"  required />
                        <p id="err_field"></p>
                    </div>

                    <hr>


                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Choice 1</span>
                        </div>
                        <input type="text" class="form-control" name="choice1" id="choice1" aria-describedby="inputGroup-sizing-sm" required />
                    </div>


                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Choice 2</span>
                        </div>
                        <input type="text" class="form-control" name="choice2" id="choice2" aria-describedby="inputGroup-sizing-sm" required />
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Choice 3</span>
                        </div>
                        <input type="text" class="form-control" name="choice3" id="choice3" aria-describedby="inputGroup-sizing-sm" required />
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Answer Choice</span>
                        </div>
                        <input type="text" class="form-control" name="answer" id="answer" aria-describedby="inputGroup-sizing-sm" required /> 
                    </div>

                    <input type="button" id="btnSave" class="btn btn-block btn-info" value="Submit" />

                </form>
            </div>
        </div>
       </div>
       <div class="modal-footer">
         <button type="button" id="btnClose" class="btn btn-default">Close</button>
         <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
       </div>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div>

使用ajax获取显示数据

for(i=0; i<data.length; i++){
                html +='<div class="card">'+
                            '<div class="card-header" style="background-color:#A9CEFA;">'+
                                '<h4>Created Question no.'+ n++ +'</h4>'+
                                '</div>'+
                                '<div class="card-body">'+
                                    '<form>'+
                                        '<input type="hidden" name="txtId" value="0">'+
                                        '<div class="input-group">'+
                                        '<div class="input-group-prepend">'+
                                                '<span class="input-group-text">Question</span>'+
                                            '</div>'+
                                            '<input type="text" name="question" value="'+data[i].question+'" class="form-control" required>'+
                                        '</div>'+
                                        '<hr>';
                                        if(!data[i].choice1==0){
                                        html += '<div class="input-group input-group-sm mb-3">'+
                                                    '<div class="input-group-prepend">'+
                                                        '<span class="input-group-text" id="inputGroup-sizing-sm">Choice 1</span>'+
                                                    '</div>'+
                                                    '<input type="text" class="form-control" value="'+data[i].choice1+'" name="choice1" aria-describedby="inputGroup-sizing-sm" required>'+
                                                '</div>';
                                        }
                                        if(!data[i].choice2==0){
                                        html += '<div class="input-group input-group-sm mb-3">'+
                                            '<div class="input-group-prepend">'+
                                                '<span class="input-group-text" id="inputGroup-sizing-sm">Choice 2</span>'+
                                            '</div>'+
                                            '<input type="text" class="form-control" name="choice2" value="'+data[i].choice2+'" aria-describedby="inputGroup-sizing-sm" required>'+
                                        '</div>';
                                        }
                                        if(!data[i].choice3==0){
                                        html += '<div class="input-group input-group-sm mb-3">'+
                                            '<div class="input-group-prepend">'+
                                                '<span class="input-group-text" id="inputGroup-sizing-sm">Choice 3</span>'+
                                            '</div>'+
                                            '<input type="text" class="form-control" name="choice3" value="'+data[i].choice3+'" aria-describedby="inputGroup-sizing-sm" required>'+
                                        '</div>';
                                        }
                                        html += '<div class="input-group input-group-sm mb-3">'+
                                            '<div class="input-group-prepend">'+
                                                '<span class="input-group-text" id="inputGroup-sizing-sm">Answer Choice</span>'+
                                            '</div>'+
                                            '<input type="text" class="form-control" name="answer" value="'+data[i].answer+'" aria-describedby="inputGroup-sizing-sm" required>'+
                                        '</div>'+
                                        '<a href="javascript:;" class="btn btn-info item-edit" data="'+data[i].id+'">Edit </a>&nbsp;'+
                                        '<a href="javascript:;"  class="btn btn-danger item-delete" data="'+data[i].id+'"> Delete</a>'+
                                    '</form>'+
                                '</div>'+
                            '</div><hr>';
                    }

$('#showdata').html(html);

Answer 1

由于您已经在模态上设置了所有 id(例如 input[name=question])，因此您可以将选择器设置为这些 id 而不是名称(例如 input#question ):

//edit
$('#showdata').on('click', '.item-edit', function(){
        var id = $(this).attr('data');
        $('#myModal').modal('show');
        $('#myModal').find('.modal-title').text('Edit Question');
        $('#myForm').attr('action', '<?php echo base_url() ?>teachers/updateQuestion');
        $.ajax({
            type: 'ajax',
            method: 'get',
            url: '<?php echo base_url() ?>teachers/editQuestion',
            data: {id: id},
            async: false,
            dataType: 'json',
            success: function(data){
                $('input#question').val(data.question);
                $('input#choice1').val(data.choice1);
                $('input#choice2').val(data.choice2);
                $('input#choice3').val(data.choice3);
                $('input#answer').val(data.answer);
            },
            error: function(){
                alert('Could not Edit Data');
            }
        });
    });