不能使用 HTML 重复同一部分,只显示 1 个代码块而忽略另一个

艾哈迈德·瓦格迪

我在 HTML 页面中有一个包含图像滑块的部分,我想重复它,但第二个从未出现过。这是原始代码

  <!-- Featured Listings Start -->
    <section class="featured-lis">
        <div class="container">
            <div class="row">
                <div class="col-md-12 wow fadeIn" data-wow-delay="0.5s">
                    <h3 class="section-title">Featured Listings</h3>
                    <div id="new-products" class="owl-carousel">
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img1.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Lorem ipsum dolor sit</a>
                                <span class="price">$150</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img2.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Sed diam nonummy</a>
                                <span class="price">$67</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img3.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Feugiat nulla facilisis</a>
                                <span class="price">$300</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img4.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Lorem ipsum dolor sit</a>
                                <span class="price">$149</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img5.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Sed diam nonummy</a>
                                <span class="price">$90</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img6.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Praesent luptatum zzril</a>
                                <span class="price">$169</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img7.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Lorem ipsum dolor sit</a>
                                <span class="price">$79</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img8.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Sed diam nonummy</a>
                                <span class="price">$149</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Featured Listings End -->

我所做的就是再次重复整个代码块,在页面中有 2 个滑块......但它没有显示第二个。将其保留为代码中所示的效果很好,仅显示 1 个滑块。只有当我再次重复代码以获得 2 个代码块时才会出现问题。只出现 1 个滑块。

j08691

您需要确保在复制代码块时保持所有 ID 的唯一性。复制它们是导致问题的原因。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

用Python中的BS4替换整个代码块(另一个块的HTML的一部分)

使用jQuery将HTML的一个块映射到另一个

使用Flask在HTML文件中显示python词典的一部分

如何在html代码的另一部分或另一个textarea的textarea中显示文本

如何显示html的一部分?

Outlook不显示HTML的一部分

使用块 javascript 选择后重定向到另一个 html 页面

让DIV的一部分移出另一个DIV时消失吗?(CSS,JQuery,HTML)

使用Shell脚本大量获取HTML源代码的一部分

使用!ERRORLEVEL!在通过代码块传递给另一个进程的代码中

为什么组中的另一个成员不能使用目录?

使用XSLT将XML文件转换为另一个XML文件,但是其中一部分代码无法正常工作

如何提取datframe列的一部分并使用该提取创建另一个列

使用变量作为另一个变量名的一部分

Dataweave-使用另一个键作为keyName一部分的选择器

Codeigniter在另一个查询中使用查询结果的一部分

Django使用模板变量的值作为另一个变量名的一部分

使用迭代器将文件的一部分复制到另一个文件

使用 VUE - 即使只有一部分不同,HTML 是否也会更新?

使用Java在html中选择文本的一部分

使用 Django 仅更新 HTML 页面的一部分

使用beautifulsoup美化html文档的一部分

如何使用CSS文件仅更改HTML文件的一部分?

使用XMLHttpRequest获取网页,但仅获取html的一部分

如何使用Javascript用数组的一部分替换元素的内部HTML文本

如何检索URL的最后一部分并在html中使用它?

使用 Soup/Selenium 的 HTML 的一部分而不是完整的

從 html 的這一部分使用的正確元素是什麼?

使用 0,1 而不是 " " 替换字符串的一部分