jquery - HTML 和 CSS 对齐

Question

所以..这是我第一次使用 stackoverflow，如果我犯了错误，请原谅。

我正在尝试在此处复制 css 代码片段:https://codepen.io/virgilpana/pen/RNYQwB。

一切正常，但我不知道如何在同一页面上添加更多产品卡片。我试过复制#product-card div，但这样做会阻止代码工作。这是一个例子:

<div id="make-3D-space">
    <div id="product-card">
        <div id="product-front">
            <div class="shadow"></div>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
            <div class="image_overlay"></div>
            <div id="view_details">View details</div>
            <div class="stats">         
                <div class="stats-container">
                    <span class="product_price">$39</span>
                    <span class="product_name">Adidas Originals</span>    
                    <p>Men's running shirt</p>                                            

                    <div class="product-options">
                    <strong>SIZES</strong>
                    <span>XS, S, M, L, XL, XXL</span>
                    <strong>COLORS</strong>
                    <div class="colors">
                        <div class="c-blue"><span></span></div>
                        <div class="c-red"><span></span></div>
                        <div class="c-white"><span></span></div>
                        <div class="c-green"><span></span></div>
                    </div>
                </div>                       
                </div>                         
            </div>
        </div>
        <div id="product-back">
            <div class="shadow"></div>
            <div id="carousel">
                <ul>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
                </ul>
                <div class="arrows-perspective">
                    <div class="carouselPrev">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                    <div class="carouselNext">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                </div>
            </div>
            <div id="flip-back">
                <div id="cy"></div>
                <div id="cx"></div>
            </div>
        </div>    
    </div>  
  <div id="product-card">
        <div id="product-front">
            <div class="shadow"></div>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
            <div class="image_overlay"></div>
            <div id="view_details">View details</div>
            <div class="stats">         
                <div class="stats-container">
                    <span class="product_price">$39</span>
                    <span class="product_name">Adidas Originals</span>    
                    <p>Men's running shirt</p>                                            

                    <div class="product-options">
                    <strong>SIZES</strong>
                    <span>XS, S, M, L, XL, XXL</span>
                    <strong>COLORS</strong>
                    <div class="colors">
                        <div class="c-blue"><span></span></div>
                        <div class="c-red"><span></span></div>
                        <div class="c-white"><span></span></div>
                        <div class="c-green"><span></span></div>
                    </div>
                </div>                       
                </div>                         
            </div>
        </div>
        <div id="product-back">
            <div class="shadow"></div>
            <div id="carousel">
                <ul>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
                </ul>
                <div class="arrows-perspective">
                    <div class="carouselPrev">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                    <div class="carouselNext">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                </div>
            </div>
            <div id="flip-back">
                <div id="cy"></div>
                <div id="cx"></div>
            </div>
        </div>    
    </div>  
</div>  

css和js在上面的笔中。

我想知道，为什么我不能只复制并粘贴 div 来制作更多网格，以便我可以用不同的图像替换图像？

谢谢。

Answer 1

欢迎来到SO!这是第一个很好的问题。

正如@Tyr 和@vysnc 在评论中建议的那样，简单地复制/粘贴 product-card 是最大的问题代码块是该演示使用 ID，而不是类。 The W3C states :

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character.

因此，在该代码块中复制所有这些 ID 有悖于最佳实践。这也会让您的 jQuery 感到困惑，其中大部分都限定在像 #product-card 这样的个人 ID 范围内。和 #view-details .它假设每个页面上只有这些元素之一，当它发现更多元素时，它不确定如何处理它。

Codepen 代码不是最有效的编写方式，但我会采取以下步骤进行调试:

1. 确保只有一个实例运行 #product-card代码块。在该代码块中，将所有 ID 更改为类。这意味着 <div id="product-card">变成 <div class="product-card"> ， 等等。请注意，这显然会暂时破坏您的演示。

2. 在您的 jQuery 中，您需要类似地将所有 ID 更改为类。为了将交互仅限于该特定卡片(而不是页面上的每张卡片)，您需要稍微重构一下。使用 closest() , find() , 和 next() jQuery 方法将帮助您将代码范围限定到单个卡片。

3. 调整您的 CSS。该演示中的所有内容都绝对定位并居中，因此如果您只是复制/粘贴卡片标记，卡片将堆叠在另一张下面，看起来就像其他卡片根本没有出现一样。在父<div class="make-3D-space"> , 删除 position: absolute和 position: relative (这是演示代码中的错字)，然后添加创建列所需的任何 CSS。

我做了一个快速而肮脏的演示来说明:https://codepen.io/cameronscott137/pen/edwExe