首页 > 解决方案 > 大家好,当我单击标题按钮时,我为每个标题获得了相同的博客

问题描述

当我点击 django 标题时,我得到 django 帖子,当我点击 javascript 标题时,我得到 django 帖子,以太没有使用任何框架,我的博客页面我真的尝试了所有我知道的解决方案,但不幸的是,没有发生任何事情 ,这里有一张图片

博客.html

 {% for blog in blogs %}
        <div class="col-xl-12 col-md-6 col-xs-12 blog">
            <div class="right-text-content">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                    <h2 class="sub-heading">{{blog.title|title}}</h2>
                </button>
                <!-- Modal -->

                <div class="modal fade align-self-end mr-3 " id="myModal" tabindex="1" role="dialog"
                    aria-hidden="true">

                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{{blog.title|title}}</h5>

                                <h6 class="float-right">{{blog.created_at}}</h6>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                {{blog.content|linebreaks}}
                            </div>
                            <div class="modal-footer">
                                <h5>Created by {{blog.name}}</h5>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>

                </div>


                <p>
                    <br>
                    <a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
                    <br>
                    {{blog.content|linebreaks}}
                </p>
                {{blog.created_at}}
            </div>
        </div>
        {% endfor %}

视图.py

from django.shortcuts import render
from .models import DigitalTeam, Blog


def index(request):
    pers = DigitalTeam.objects.all()
    return render(request, 'index.html', {'pers':pers})

def blog(request):
    pers = DigitalTeam.objects.all()
    blogs = Blog.objects.all()
    return render(request, 'blog.html', {'pers':pers, 'blogs':blogs})

网址.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('blog', views.blog, name='blog'),
]

所以伙计们我错过了什么

标签: pythondjangobootstrap-modal

解决方案


要在模态中获取单个博客详细信息,您需要将博客 ID 作为道具传递给模态。可以通过在按钮 data-target 属性中添加 blog.id 并在 modal id 属性中接收 blog.id 来完成。下面给出的解决方案,

{% for blog in blogs %}
<div class="col-xl-12 col-md-6 col-xs-12 blog">
    <div class="right-text-content">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal{{blog.id}}">
            <h2 class="sub-heading">{{blog.title|title}}</h2>
        </button>
        <!-- Modal -->

        <div class="modal fade align-self-end mr-3 " id="myModal{{blog.id}}" tabindex="1" role="dialog"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{blog.title|title}}</h5>

                        <h6 class="float-right">{{blog.created_at}}</h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{blog.content|linebreaks}}
                    </div>
                    <div class="modal-footer">
                        <h5>Created by {{blog.name}}</h5>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <p>
            <br>
            <a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
            <br>
            {{blog.content|linebreaks}}
        </p>
        {{blog.created_at}}
    </div>
</div>
{% endfor %}

推荐阅读