我有一个for循环，它使用Bootstrap创建产品卡片。我想在用户可以点击查看该类别中所有产品的地方添加一个额外的卡片。我希望这个额外的卡片总是相同的大小，并且它是前一张卡片。我已经尝试了几个来自谷歌的JavaScript解决方案，但无法让它工作。
我的代码如下：
{% extends "base.html" %}
{% load static %}
{% block content %}
<!-- Disposable Vape Section -->
<section>
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col text-center mt-5">
<h2 class="logo-font">Shop Disposables - Over 100 flavours available</h2>
<hr class="w-50 mb-5">
</div>
</div>
<div class="row">
<div class="product-container col-10 offset-1">
<div class="row mt-1">
{% for product in products %}
{% if product.category.name == 'disposable_vape' %}
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="card h-100 border-0">
{% if product.image %}
<a href="{% url 'product_detail' product.id %}">
<img class="card-img-top img-fluid" src="{{ product.image.url }}"
alt="{{ product.name }}">
</a>
{% else %}
<a href="{% url 'product_detail' product.id %}">
<img class="card-img-top img-fluid" src="{{ MEDIA_URL }}noimage.png"
alt="{{ product.name }}">
</a>
{% endif %}
<div class="card-body pb-0">
<p class="mb-0">{{ product.name }}</p>
</div>
<div class="card-footer bg-white pt-0 border-0 text-left">
<div class="row">
<div class="col">
<p class="lead mb-0 text-left font-weight-bold">£{{ product.price }}</p>
{% if product.category %}
<p class="small mt-1 mb-0">
<a class="text-muted"
href="{% url 'products' %}?category={{ product.category.name }}">
<i class="fas fa-tag mr-1"></i>{{ product.category.friendly_name }}
</a>
</p>
{% endif %}
{% if product.rating %}
<small class="text-muted"><i class="fas fa-star mr-1"></i>{{ product.rating }} /
5</small>
{% else %}
<small class="text-muted">No Rating</small>
{% endif %}
{% if request.user.is_superuser %}
<small class="ml-3">
<a href="{% url 'edit_product' product.id %}">Edit</a> |
<a class="text-danger"
href="{% url 'delete_product' product.id %}">Delete</a>
</small>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:1 %}
<div class="col-12 d-sm-none mb-5">
<hr>
</div>
{% endif %}
{% if forloop.counter|divisibleby:2 %}
<div class="col-12 d-none d-sm-block d-md-block d-lg-none mb-5">
<hr>
</div>
{% endif %}
{% if forloop.counter|divisibleby:3 %}
<div class="col-12 d-none d-lg-block d-xl-none mb-5">
<hr>
</div>
{% endif %}
{% if forloop.counter|divisibleby:4 %}
<div class="col-12 d-none d-xl-block mb-5">
<hr>
</div>
{% endif %}
{% endif %}
{% endfor %}
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="card h-100 border-0">
<a href="{% url 'products' %}?filter=category&category=disposable_vape"
class="stretched-link"></a>
<div class="card-body pb-0">
<div class="d-flex center">
<div class="btn btn-prod-black">
<a href="{% url 'products' %}?filter=category&category=disposable_vape"
class=""></a>
<span class="text-uppercase">Shop
All Disposables
<span class="icon">
<i class="fas fa-chevron-right"></i>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btt-button shadow-sm rounded-0 border border-black">
<a class="btt-link d-flex h-100">
<i class="fas fa-arrow-up text-black mx-auto my-auto"></i>
</a>
</div>
</section>
<!-- Nicotine Salts Section -->
<section>
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col text-center mt-5">
<h2 class="logo-font">Shop Nicotine Salts</h2>
<hr class="w-50 mb-5">
</div>
</div>
<div class="row">
<div class="product-container col-10 offset-1">
<div class="row mt-1">
{% for product in products %}
{% if product.category.name == 'liquid_nic_salts' %}
<div class="home-card col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="card h-100 border-0">
{% if product.image %}
<a href="{% url 'product_detail' product.id %}">
<img class="card-img-top img-fluid" src="{{ product.image.url }}"
alt="{{ product.name }}">
</a>
{% else %}
<a href="{% url 'product_detail' product.id %}">
<img class="card-img-top img-fluid" src="{{ MEDIA_URL }}noimage.png"
alt="{{ product.name }}">
</a>
{% endif %}
<div class="card-body pb-0">
<p class="mb-0">{{ product.name }}</p>
</div>
<div class="card-footer bg-white pt-0 border-0 text-left">
<div class="row">
<div class="col">
<p class="lead mb-0 text-left font-weight-bold">£{{ product.price }}</p>
{% if product.category %}
<p class="small mt-1 mb-0">
<a class="text-muted"
href="{% url 'products' %}?category={{ product.category.name }}">
<i class="fas fa-tag mr-1"></i>{{ product.category.friendly_name }}
</a>
</p>
{% endif %}
{% if product.rating %}
<small class="text-muted"><i class="fas fa-star mr-1"></i>{{ product.rating }} /
5</small>
{% else %}
<small class="text-muted">No Rating</small>
{% endif %}
{% if request.user.is_superuser %}
<small class="ml-3">
<a href="{% url 'edit_product' product.id %}">Edit</a> |
<a class="text-danger"
href="{% url 'delete_product' product.id %}">Delete</a>
</small>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:1 %}
<div class="col-12 d-sm-none mb-5">
<hr>
</div>
{% endif %}
{% if forloop.counter|divisibleby:2 %}
<div class="col-12 d-none d-sm-block d-md-block d-lg-none mb-5">
<hr>
</div>
{% endif %}
{% if forloop.counter|divisibleby:3 %}
<div class="col-12 d-none d-lg-block d-xl-none mb-5">
<hr>
</div>
{% endif %}
{% if forloop.counter|divisibleby:4 %}
<div class="col-12 d-none d-xl-block mb-5">
<hr>
</div>
{% endif %}
{% endif %}
{% endfor %}
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="home-card-extra card h-100 border-0">
<a href="{% url 'products' %}?filter=category&category=liquid_nic_salts"
class="stretched-link"></a>
<div class="card-body pb-0">
<div class="d-flex center">
<div class="btn btn-prod-black">
<a href="{% url 'products' %}?filter=category&category=liquid_nic_salts"
class=""></a>
<span class="text-uppercase">Shop
All Nicotine Salts
<span class="icon">
<i class="fas fa-chevron-right"></i>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btt-button shadow-sm rounded-0 border border-black">
<a class="btt-link d-flex h-100">
<i class="fas fa-arrow-up text-black mx-auto my-auto"></i>
</a>
</div>
</section>
{% endblock %}
{% block postloadjs %}
<script language="javascript" type="text/javascript">
$("#home-card-extra").height($("#home-card").height());
</script>
{% endblock %}
1条答案
按热度按时间xxls0lw81#
我发现了一个很棒的JS函数，我所要做的就是添加一个equalHeight的内部div类，然后后加载下面的js：