Question

我正在为使用Business Catalyst的客户开发电子商务网站。

在他们的“菜单”页面上，他们希望在所有缺货产品的图片上显示“缺货”DIV。

DIV应由BC的专有内容标签{tag_instock}触发当{tag_instock}为0时，div.nostock应显示在所有缺货的产品上。
目前，它只显示一种产品缺货而非所有产品。

HTML：

<ul class="product-images">
        <div id="nostock" class="nostock" style="display: none;"><h2>Out of Stock</h2></div>
            <li>img_one</li>
            <li>img_two</li>
            <li>img_three</li>
        </ul>

SCRIPT：

            $(document).ready(function() {
            var stock = "{tag_instock}";
            if (stock == 0) {
                document.getElementById('nostock').style.display = "block"

            };
        });

我不太清楚使用jquery与javascript。哪个更适合这个解决方案？

如果我需要详细说明，请告诉我。非常感谢任何帮助。

谢谢。

Answer 1

如果三个图像总是相同，我会将它们组合成一个图像。如果这样做，那么您可以使用content属性创建一个覆盖图像的CSS类。通过动态地将类添加到相关的div，您可以实现所需的效果。

该课程如下：

.no-stock-image:after {
    content: url(images/out-of-stock.png);
    position: absolute;
    top: 10px;
    left: -10px;
}

显然你必须调整定位。

Answer 2

听起来我应该使用以下HTML：

<ul class="product-images">
    <li><span class="nostock" style="display: none;">Out of Stock</span>img_one</li>
    <li><span class="nostock" style="display: none;">Out of Stock</span>img_two</li>
    <li><span class="nostock" style="display: none;">Out of Stock</span>img_three</li>
</ul>

然后使用CSS，如：

.no-stock {
    position: absolute;
    top: Xpx;
    left: Xpx;
    width: Xpx;
    height: Xpx
    background-color: #eee;
}

调整X以适应。

Answer 3

我使用数据属性模拟股票价值以用于演示目的...告诉我这是否适合您，这里是Fiddle

$(function() {
  $('li').each(function() {
 //  var stock = "{tag_instock}";
     var stock = $(this).data('stock');

     if (stock == 0) {
         $(this).append('<div class="nostock">Out of Stock</div>');
     }
     if (stock > 0) {
         $(this).append('<div class="instock">In Stock '+stock+'</div>');
     }
   });
});

我过度了一点，除了instock和instock值之外，Fiddle更新了。

在多个元素上显示相同的DIV

3 个答案: