问题描述
我只想执行更新操作。数据（基本上是来自 views.py 的一组问题），每个问题都以引导手风琴的形式显示。我想要的场景是当我们打开手风琴时，有一个用于更新数据的模式切换按钮，当按下按钮时，它会打开模式，其中包含特定打开的手风琴的问题，允许用户更新该数据。
问题是，在当前代码中，当我单击第一个问题的模型按钮时，它会显示第一个问题数据（这意味着它工作正常）但是当我单击第二个手风琴模式按钮（包含不同的问题）时，显示第一个问题的数据是指第一手风琴数据。我无法弄清楚如何获得所需的输出意味着打开特定手风琴的模型应该显示特定手风琴的数据，以便我们可以执行更新操作。这是我的模板文件
{% extends 'base.html' %}
{% block title %}Add Questions{% endblock title %}
{% block body %}
<body>
<label for=""><h4 style="color: indianred">Grade >> {{classname}} >> {{topicname}} >> {{subtopicnames}} </h4></label><br>
<br>
<br>
<br>
</div>
</form>
<div class="panel-group" id="accordion">
{% for x in queryset %} <!-- retrieving all questions from views.py-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}">
Question
</a>
</h3>
</div>
<div id="collapse{{ forloop.counter }}" class="panel-collapse collapse">
<div class="panel-body">
<!-- <input type="button" onclick="updateques();" value="Edit!!"><br> -->
<br><br>
<div>
{{x.question.id}}
<input type="hidden" id="quesid" name="quesid" value="{{x.question.id}}">
<label>Q- <input type="text" id="ques" name="ques" value="{{x.question.question}}" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" id="op1" name="" value="{{x.option.option1}}" readonly><br><br>
<label>B- <input type="text" id="op2" name="" value="{{x.option.option2}}" readonly><br><br>
<label>C- <input type="text" id="op3" name="" value="{{x.option.option3}}" readonly><br><br>
<label>D- <input type="text" id="op4" name="" value="{{x.option.option4}}" readonly><br><br>
<input type="checkBox" name="" value="{{x.answer}}" checked>
<label>{{x.question.difficulty}}</label>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Edit</button>
<!-- <input type="submit" id="update" value="Update" /> -->
</div>
<!--Toogle Button-->
</div>
</div>
{{x.question.id}}<!-- checking here if it returns the right question id value of the accordian that is opened and it displays the correct id value but when it comes to modal it takes only the 1st question id and its data-->
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="hidden" id="quesid" name="quesid" value="{{x.question.id}}">
<label>Q- <input type="text" id="ques" name="ques" value="{{x.question.question}}" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" id="op1" name="" value="{{x.option.option1}}" readonly><br><br>
<label>B- <input type="text" id="op2" name="" value="{{x.option.option2}}" readonly><br><br>
<label>C- <input type="text" id="op3" name="" value="{{x.option.option3}}" readonly><br><br>
<label>D- <input type="text" id="op4" name="" value="{{x.option.option4}}" readonly><br><br>
<input type="checkBox" name="" value="{{x.answer}}" checked>
<label>{{x.question.difficulty}}</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock body %}
当我将模态对话代码部分放在面板主体内时，它只会打开第一个手风琴的模态对话框，而不是第二个和其余问题。
当我将模态代码部分放在循环模板中时，它会打开所有手风琴的模态对话框，但是当我打开所有手风琴的模态对话框时，它会显示所有手风琴的第 1 个手风琴的数据。
获得所需场景的可能方法是什么？
解决方法
您可以将整个模态移出 for 循环，并为所有问题仅保留一个模态。因此，无论何时用户点击 edit 按钮，您都可以简单地 clone 整个 contents（添加此类）div，然后在模态正文中添加该克隆内容，因为您在模态中显示内容这已经存在于手风琴中，所以只需从手风琴中获取整个 html。
演示代码：
$("button[data-toggle='modal']").on("click",function() {
var selector = $(this).closest(".contents").clone(); //clone whole div
selector.find("button").remove() //remove modal button
selector.find("input").prop("readonly",false); //remove readonly..from inputs
//you can remove/add/manipulate this cloned content..
$(".modal-body").html(selector) //add that inside modal-body
})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<!-- retrieving all questions from views.py-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Question
</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<br/><br/>
<!--added class here -->
<div class="contents">
<!--remove ids use class-->
1
<input type="hidden" name="quesid" value="1">
<label>Q- <input type="text" name="ques" value="abc" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" name="" value="A1" readonly><br><br>
<label>B- <input type="text" name="" value="B1" readonly><br><br>
<label>C- <input type="text" name="" value="C1" readonly><br><br>
<label>D- <input type="text" name="" value="D1" readonly><br><br>
<input type="checkbox" name="" value="A" checked>
<label>Ok </label>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Edit</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Question 2
</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<br/><br/>
<div class="contents">
2
<input type="hidden" name="quesid" value="2">
<label>Q- <input type="text" name="ques" value="abc" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" name="" value="A2" readonly><br><br>
<label>B- <input type="text" name="" value="B2" readonly><br><br>
<label>C- <input type="text" name="" value="C2" readonly><br><br>
<label>D- <input type="text" name="" value="D22" readonly><br><br>
<input type="checkbox" name="" value="A" checked>
<label>Not Good </label>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Edit</button>
</div>
</div>
</div>
</div>
</div>
<!--move whole modal outside loop-->
<div class="modal fade" id="staticBackdrop" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!--here all will come-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>