Question

我有一个模式，可以显示用户的照片，在该模式中，该照片带有一个垃圾桶图标，供用户删除照片，然后，他单击该垃圾桶，就会出现另一个模式，询问他是否确定他要删除照片。并确认照片已删除。问题在于您总是要删除第一张照片，而不是删除模态中的照片。如果我在图库中间的任何照片中都单击并单击，则该照片会以模态打开，即我选择的照片，但是在尝试删除时，请始终删除图库的第一张照片

modalgallery.js

    $(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.py

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 %}

Answer 1

您删除模式的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.py

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">...

使用模式ID删除图像

1 个答案: