Javascript 基于类id列表的Django模式显示

我想允许根据数据库中设置的id显示模式。将容器中的不同水果/蔬菜分为几块，我将它们的id放在类的id字段中

换句话说，在overlay类中为特定水果按下一个按钮将显示一个包含其余信息的单一模式

HTML代码：

{% block body_block %}
<div class="container-fruits">
    <div class="row">
        {% for t in thumb %}
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">
                {% thumbnail t.image "255x189" crop="center" as im %}
                    <div class="hovereffect">
                        <img class="img-responsive" src="{{ im.url }}" alt="Card image cap">
                        <div class="overlay">
                            <h2>{{ t.name }}</h2>
                            <a id="{{ t.id }}" class="info" data-target="#{{ t.id }}" href="#">show details</a>
                        </div>
                    </div>
                {% endthumbnail %}
            </div>
        {% endfor %}
    </div>
</div>

{% for t in thumb %}
    <div id="{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">
        <div class="modal-dialog modal-lg ">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h2 class="modal-title">{{ t.name }} information</h2>
                </div>

                <div class="modal-body">
                    <h2 class="modal-body-text">{{ t.description }}</h2>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

<script src="{% static 'javascript/fruits.js' %}"></script>

{% endblock %}

---

要打开特定ID所针对的模式，只需知道ID和

• 从

  a

  标记中删除

  id

  id=“{{t.id}}”

• 重命名您的目标

  data target=“#modal-{{t.id}}”

  以更好地避免多个相同的

  id

  s

  <a data-toggle="modal" class="info" data-target="#modal-{{ t.id }}"....
  

标签

a

变为：

<a class="info" data-target="#modal-{{ t.id }}" href="#">show details</a>

在这种情况下，实际上并不需要

数据目标=“

”

第二选项：

因为你想在展示模态之前做一些事情，这符合你的需要。 当用

点击
事件触发
a
标记时，是js，您只需要显示相关的模式


    $('.info').click(function (e) {
        $(".fruitsModal").fadeIn('slow');
        var image = $(e.relatedTarget).attr('src');
        var text = $(e.relatedTarget).attr('t.name');
        $(".img-responsive").attr("src", image);
        $(".modal-body").attr("modal-body-text", text);
        console.log('hello bind');
        // # retrieve the target modal: data-target="#modal-{{ t.id }}"
        var t_modal = $("this").data('target');
        $(t_modal).show(); // this is because you have style={display:none}
        $(t_modal).modal('show');
    });


$（'.info'）。单击（函数（e）{
$（“.fruitsModal”）.fadeIn（'slow'）；
var image=$（e.relatedTarget）.attr（'src'）；
var text=$（e.relatedTarget）.attr（'t.name'）；
$（“.img responsive”）.attr（“src”，图像）；
$（“.modal body”）.attr（“modal body text”，text）；
log（'hello bind'）；
//#检索目标模式：数据目标=“#模式-{{t.id}”
var t_modal=$（“本”）.数据（'target'）；
$（t_modal）.show（）；//这是因为您的样式为{display:none}
$（t_modal）.modal（'show'）；
});
那么您的代码出了什么问题？你们想做什么？正如我在主题中提到的。我想实现的是：在overlay类中单击特定按钮后，谁代表单个水果，只为这个水果打开一个模式。使用相同的id。检查我的答案并让我知道！当我尝试第1个解决方案时，它包含对地址中特定id的更改，例如：当我单击特定水果时，但模式不会显示。包含第二个选项，当单击overlay类中的任何特定id时，显示所有模态。也许这很重要，但当我将javascript用于这个片段时：
var t_modal=$（“this”）.data（'target'）$（t_modal）.show（）；//这是因为您有style={display:none}$（t_modal.modal（'show'）显示错误未捕获类型错误：$（…）。模式不是函数
<a class="info" data-target="#modal-{{ t.id }}" href="#">show details</a>

<div id="modal-{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">
    <div class="modal-dialog modal-lg ">

    <a data-toggle="modal" href="#modal-{{ t.id }}" data-target="#modal-{{ t.id }}"


    $('.info').click(function (e) {
        $(".fruitsModal").fadeIn('slow');
        var image = $(e.relatedTarget).attr('src');
        var text = $(e.relatedTarget).attr('t.name');
        $(".img-responsive").attr("src", image);
        $(".modal-body").attr("modal-body-text", text);
        console.log('hello bind');
        // # retrieve the target modal: data-target="#modal-{{ t.id }}"
        var t_modal = $("this").data('target');
        $(t_modal).show(); // this is because you have style={display:none}
        $(t_modal).modal('show');
    });