我使用循环来显示数据库中的数据。我希望两个表格的内容在卡片中彼此相邻显示,所以我使用了两个循环,它们由一个循环中的一个循环组成
{%for plan in plans%}
{%for natural in naturals%}
<div class="card" style="width: 18rem;">
<img src="https://edoctorug.com/static/img/edoctor.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
{{plan.name}} {{natural.name}} {{natural.amount}}
<script>
function createPaymentParams() {
// Create payment params which will be sent to Flutterwave upon payment
{% autoescape off %}
let pay_button_params = JSON.parse('{% if user.is_authenticated %}{% pay_button_params user_pk=user.pk plan_pk=plan.pk %}{% endif %}');
{% endautoescape %}
paymentParams['{{ plan.name }} '] = {
public_key: pay_button_params.public_key,
tx_ref: pay_button_params.tx_ref,
amount: '{{plan.amount}} ',
currency: '{{plan.currency}}',
redirect_url: pay_button_params.redirect_url,
payment_plan: '',
payment_type:'',
customer: {
email: '{{ user.email }}',
name: '{{ user.first_name }} {{ user.last_name }}',
},
customizations: {
title: '',
logo: 'https://edoctorug.com/static/img/edoctor.png',
},
}
}
if ('{{ user.is_authenticated }}' === 'True') {
createPaymentParams();
}
</script>
{% if user.is_authenticated %}
<button class="{{ plan.pay_button_css_classes }}" type="button"
onClick="makePayment(paymentParams['{{ plan.name }} '])">
{{ plan.pay_button_text }}
</button>
{% else %}
<p>User must be signed in</p>
{% endif %}
<script>
function createPaymentParams() {
// Create payment params which will be sent to Flutterwave upon payment
{% autoescape off %}
let pay_button_params = JSON.parse('{% if user.is_authenticated %}{% pay_button_params user_pk=user.pk plan_pk=plan.pk %}{% endif %}');
{% endautoescape %}
paymentParams['{{ natural.name }}'] = {
public_key: pay_button_params.public_key,
tx_ref: pay_button_params.tx_ref,
amount: '{{natural.amount}}',
currency: '{{natural.currency}}',
redirect_url: pay_button_params.redirect_url,
payment_plan: '',
payment_type:'',
customer: {
email: '{{ user.email }}',
name: '{{ user.first_name }} {{ user.last_name }}',
},
customizations: {
title: '',
logo: 'https://edoctorug.com/static/img/edoctor.png',
},
}
}
if ('{{ user.is_authenticated }}' === 'True') {
createPaymentParams();
}
</script>
{% if user.is_authenticated %}
<button
class="{{ natural.pay_button_css_classes }}"
type="button"
onClick="makePayment(paymentParams['{{ natural.name }}'])">
{{ natural.pay_button_text }}
</button>
{% else %}
<p>User must be signed in</p>
{% endif %}
</div>
</div>
{%endfor%}
{%endfor%}
</div>
结果是这样的,但我只希望按钮在一张卡片中出现一次,而不是在另一张卡片中出现第二次。 enter image description here