0

我正在为使用 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>

脚本：

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

            };
        });

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

如果我需要详细说明，请告诉我。任何帮助是极大的赞赏。

谢谢你。

4

3 回答 3

0

如果三个图像始终相同，我会将它们组合成一个图像。如果你这样做，那么你可以创建一个 CSS 类，使用content属性覆盖图像。通过动态地将类添加到有div问题的 's 中，您可以获得所需的效果。

该类如下所示：

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

显然你必须调整定位。

于 2013-09-16T21:05:06.193 回答
0

在我看来，您应该使用以下 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 以适应。

于 2013-09-16T22:38:40.217 回答
0

我出于演示目的使用数据属性模拟股票价值......告诉我这是否适合你，这是一个小提琴

$(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>');
     }
   });
});

我做得有点过头了，除了添加库存和库存值之外，Fiddle 更新了。

于 2013-09-16T22:43:26.607 回答