Question

我需要使用Javascript和Css有条件地显示我的购物车按钮。我的目标是在购物车内没有物品时隐藏按钮。

我的按钮代码是：

<span id="mycartbutton" style="float: right; clear: both;">
<a class="button"href="$(shopping_cart_url)">Mon panier</a>
</span>

当购物车中没有任何内容时，网址看起来就像这样：

/.../mode=show_cart

当存在一个或多个项目时，网址如下所示：

/.../mode=show_cart&cart_id=10332&first_reservation_id=717

不幸的是我不是编码员而且我没有任何javascript知识，但我想可以根据渲染的网址进行检查。

其实我使用以下javascript：

<script type='text/javascript'>
function on_site_form_loaded(event) {
    if (event=='product_list')
        document.getElementById('mycartbutton').style.display='none';
    }
</script>

..这允许我按照需要隐藏产品列表上的按钮但是即使某些商品在购物车内。

有人可以告诉我必须使用哪个条件代码来检查url是否包含例如文本“cart_id”？这意味着购物车内存在某些东西，让我隐藏按钮。

Answer 1

如果您的网页设置如下：

<ul id="cart">
   <li>Item 1</li>
   <li>Item 2</li>
</ul>
<span id="mycartbutton"...>...</span>

然后你可以使用这个CSS：

#cart:empty~#mycartbutton {display:none}

但是，这仅适用于购物车按钮是购物车本身的兄弟（如果它们之间有元素，使用+而不是~），并且仅当购物车的商品是购物车元素的第一级孩子。

如果无法做到这一点，则需要使用JavaScript。基本上，您可以随时查看商品数量，例如document.getElementById('cart').children.length，并使用该信息在按钮上设置display:none或display:block。

Answer 2

url.indexOf()应该适合你。试试这个：

<script>
    function check(url){
        if(url.indexOf("cart_id")>-1){
            // cart_id present do something
        }
    }
</script>

Answer 3

如果总网址位于字符串Url中，请搜索字符串“cart_id”并将其放在布尔值中。

cartIDFound = Url.search("cart_id");

if (cartIdFound){
    // ... cart id is found. items are in cart .. do domething
    // .. first,show button by setting visibility to visible and showing display
    document.getElementById('mycartbutton').style.visibility='visible';
    document.getElementById('mycartbutton').style.display='inline';
    // ... next, continue

}
else {
      //  .. cart id wasn't found; no items in cart.. do something different
      // first, hide the cart button
      document.getElementById('mycartbutton').style.visibility='hidden';
     document.getElementById('mycartbutton').style.display='none';
     // ... next, continue
}

Answer 4

使用jQuery hide()函数

<script type='text/javascript'>
    function on_site_form_loaded(event) {
        if (event=='product_list')
            $("#mycartbutton").hide();
    }
</script>

Answer 5

我终于找到了使用CSS的最佳解决方案：

#mycartbutton a.button {
    display: none; 
}

#mycartbutton a.button[href*=cart_id] { 
    display: inline-block; 
}

Iit更简单，更可靠，因为在我的情况下使用JavaScript会产生一些冲突。

使用javascript和css有条件地隐藏按钮

5 个答案: