Question

我的情况是这样的：我有一个Django网站，并实现了使用下一个和上一个箭头按钮滚动浏览照片列表的功能。如果我转到127.0.0.1:8000，则此功能将非常有效，它看起来像这样：1 但是在localhost：8000上，此功能不起作用，并且看起来像这样：2

相关的模板代码如下：

<div class="apartment-images">
        {% for image in apartment.apartmentimage_set.all %}
            <img src="{{ image.image.url }}" alt="Apartment image" class="{% if forloop.first %}active{% endif %}">
        {% endfor %}
        <div id="left-arrow" onclick="prevImage()"></div>
        <div id="right-arrow" onclick="nextImage()"></div>
        <div class="ellipses">
            {% for i in apartment.apartmentimage_set.all %}<div class="ellipse {% if forloop.first %}active{% endif %}"></div>{% endfor %}
        </div>
    </div>

以及用于显示下一张和上一张图片的javascript：

<script>
    let activeImageIndex = 0;
    let apartmentImages = $('.apartment-images img');
    let dots = $('.ellipse');

    function nextImage() {
        if (activeImageIndex < apartmentImages.length - 1) {
            activeImageIndex++;
        } else {
            activeImageIndex = 0;
        }
        changeImage(activeImageIndex);
    }
    function prevImage() {
        if (activeImageIndex > 0) {
            activeImageIndex--;
        } else {
            activeImageIndex = apartmentImages.length - 1;
        }
        changeImage(activeImageIndex);
    }
    function changeImage(index) {
        dots.removeClass('active');
        dots.eq(index).addClass('active');
        apartmentImages.removeClass('active');
        apartmentImages.eq(index).addClass('active');
    }
</script>

现在，正如我所说，此功能适用于127.0.0.1:8000，但不适用于Google Chrome浏览器上的localhost：8000，并且适用于localhost：8000和Microsoft Edge浏览器上的127.0.0.1:8000 。我曾尝试在Chrome上清除本地主机的Cookie。

非常感谢任何帮助，谢谢：）

Answer 1

我发现了解决方法！

我删除了chrome浏览器中的所有缓冲图像和文件，现在它也可以在localhost上工作了：）

操作方法如下： https://7labs.io/tips-tricks/clear-site-specific-cookies-cache.html

Django-图像滚动功能不适用于localhost，但可以在127.0.0.1上完美运行

1 个答案: