使用模态ID删除图像

Posted 2021-03-26

我有一个模式显示用户的照片，并且在该模式中，照片上有一个垃圾图标供用户删除照片，一旦他点击垃圾，就会出现另一个模态，询问他是否确定他想要删除照片。并确认照片已删除。问题是你总是删除第一张照片，你没有删除模态中的照片。如果我在画廊中间的任何照片中识别并单击，则此照片将在模式中打开，即我选择的照片，但在尝试删除时，请始终删除图库的第一张照片

Modalgallerijes

    $(function() {
        $('.pop').on('click', function() {
            $('.imagepreview').attr('src', $(this).attr('data-img-url'));
            $('#imagemodal').modal('show');   
        });     
    });

modalconfirmedelete.js

    $(function() {
        $('.pop2').on('click', function() {

            $('#delete').modal('show');   

        });     
    });

views.朋友

def delete(request, id):
    photos = Photo.objects.get(id=id)
    photos.delete()
    return redirect('sistema_perfil')

def perfil(request):
    photos_list =  Photo.objects.filter(user=request.user.pk)
    usuario = Usuario.objects.all()
    form = UsuarioForm()
    data = {'usuario': usuario, 'form': form, 'photos': photos_list}
    return render(request, 'perfil.html', data)

perfil.html

     {% for photo in photos %}

              <a class="pop" href="#"  data-img-url="{{ photo.file.large.url}}"><img src="{{ photo.file.medium.url}}"class="img-thumbnail" width="200" height="200"> </a>

              <!-- Modal Gallery-->
        <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                    <div class="modal-content">              
                    <div class="modal-body">
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">X</span></button>
                          <img src="{{ photo.file.large.url}}" class="imagepreview" style="width: 100%;" >
                          <a class="pop2" href="{% url 'delete' photo.id %}" ><img src="{% static 'svg/delete.svg' %}" width="20" height="20" alt="">Deletar </a>

                    </div>
                    </div>
                    </div>
              </div>

              <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                    <div class="modal-content">              
                    <div class="modal-body">
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">X</span></button>

                                      <h2>Tem certeza que deseja deletar essa foto: </h2>
                                      <a href="{% url 'delete' photo.id %}" type="button" class="btn bg-danger text-white js-upload-photos">
                                                  <span class="glyphicon glyphicon-cloud-upload"></span> Deletar
                                            </a>


                    </div>
                    </div>
                    </div>
              </div>


        {% endfor %}

答案

删除模态的id属性不是唯一的，因此$('#delete')始终引用相同的模态。

您可以为模型创建唯一ID，并将数据属性添加到.pop2按钮。这样的事情应该有效：

perfil.html

{% for photo in photos %}

    ...
    <a class="pop2" data-target="delete-{{ for.counter }}" href="{% url 'delete' photo.id %}" >
    ...
    <div class="modal fade" id="delete-{{ for.counter }}">
    ...

modalconfirmedelete.js

$(function() {
    $('.pop2').on('click', function() {

        $($(event.delegateTarget).data('target')).modal('show');   

    });     
});

在旁注中，我强烈建议将您的delete视图更改为仅对POST请求执行删除：

views.朋友

def delete(request, id):
    if request.method != 'POST':
        return HttpResponseNotAllowed(['POST'])
    photos = Photo.objects.get(id=id)
    photos.delete()
    return redirect('sistema_perfil')

您可以使用表单和按钮代替<a href="{% url 'delete' photo.id %}"：

perfil.html

<form action="{% url 'delete' photo.id %}" method="POST">
{% csrf_token %}
<submit class="btn bg-danger">...