隱藏按鈕有條件地使用JavaScript和css

我需要有條件地使用Javascript和Css顯示我的購物車按鈕。我的目標是在購物車內沒有物品時隱藏按鈕。隱藏按鈕有條件地使用JavaScript和css

我的按鈕的代碼是：

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

沒事的時候出現在車中，URL看上去簡直像這樣：

/.../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>

..this允許根據需要但即使有些項目的車我內心隱藏產品列表上的按鈕。

有人可以告訴我，我必須使用哪些條件代碼來檢查url是否包含例如文本「cart_id」？這將意味着車內有東西存在，並讓我隱藏按鈕。

來源

2013-04-12 dotcom22

如果購物車中沒有物品，您甚至不應該顯示按鈕。如果你不是代碼，那麼我建議僱用一個知道這個東西的編碼器。 – Ejaz

如果你的頁面設置是這樣的：如果車按鈕是車本身的兄弟

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

然而，這隻會工作：

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

那麼你可以使用這個CSS （如果它們之間存在元素，則使用+而不是~），並且僅當購物車的物品是購物車元素的第一級子元素時。

如果這不可行，您將需要使用JavaScript。基本上，您可以隨時檢查項目數量，如document.getElementById('cart').children.length，並使用該信息在您的按鈕上設置display:none或display:block。

來源

2013-04-12 11:44:29

url.indexOf()應該爲你工作。試試這個：

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

來源

2013-04-12 11:44:53 novomanish

如果總的URL是一個字符串的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 
}

來源

2013-04-12 11:45:41 KernelPanik

好吧，但在我的情況下，我需要做一些事情（這意味着應用CSS），如果沒有找到「cart_id」，而不是相反。你能否通過混合你的和我的代碼來寫下完整的代碼？ – dotcom22

嗨，我只是修改了上面的內容，以便在cart_id不存在時隱藏購物車按鈕，並在cart_id存在時顯示按鈕。讓我知道這是否有效，謝謝。 – KernelPanik

沒有這個不行。我不知道是否因爲我在代碼中執行的代碼不正確，或者是因爲其他原因。我需要保持函數on_site_form_loaded（event）if（event =='product_list'）。請注意，必須檢查的URL是按鈕呈現的URL，而不是URL頁面。 – dotcom22

使用jQuery hide()功能

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

來源

2013-04-12 11:46:14

我終於找到了一個最佳的解決方案使用CSS：

#mycartbutton a.button { 
    display: none; 
} 

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

本品系更方便，更可靠，因爲我使用JavaScript在一些衝突我的情況。

來源

2013-04-12 22:41:44 dotcom22

隱藏按鈕有條件地使用JavaScript和css

回答

相關問題