簡體   English   中英

根據 URL 顯示特定的 div 或內容

[英]display specific div or content based on URL

我希望能夠顯示包含一些特定於 URL 的內容的 div。 所以只在包含指定 URL 的頁面上顯示 div,例如:

如果 URL 等於以下任何一項:

/makeup/face/foundation/compact-loose-powder/luminous-silk-compact-case/3614270283604.html
/makeup/face/foundation/liquid-foundation/designer-lift-foundation/3605521491268.html
/makeup/face/foundation/liquid-foundation/power-fabric-foundation/ww-00049-arm.html
/makeup/face/foundation/liquid-foundation/maestro-fusion-makeup/AP10123.html
/makeup/face/foundation/face-fabric/ww-00115-arm.html

顯示以下div:

<div class="container-content">content</div>

否則隱藏它。

我嘗試了以下但沒有成功:

 var paths = ['/makeup/face/foundation/compact-loose-powder/luminous-silk- 
 compact-case/3614270283604.html', '/makeup/face/foundation/compact-loose- 
 powder/luminous-silk-compact-case/3614270283604.html', '/makeup/face/foundation/liquid-foundation/power-fabric-foundation/ww-00049-arm.html', '/makeup/face/foundation/liquid-foundation/maestro-fusion-makeup/AP10123.html', '/makeup/face/foundation/face-fabric/ww-00115-arm.html'];
 $('.container-content').toggle(paths.indexOf(location.path) != -1);

您不需要為此使用正則表達式。 將本地路徑放入一個數組中,然后測試當前位置是否與這些路徑中的任何一個匹配:

var paths = ['/en-us/mens/designers/brunello_cucinelli', '/en-us/mens/grooming', '/en-us/mens/shoes'];
$('.container-content').toggle(paths.indexOf(location.path) != -1);

這不再需要使用 jQuery 作為 Liquid 對象請求檢索當前路徑: https : //help.shopify.com/en/themes/liquid/objects/request

所以這應該可以解決問題:

{%- capture urls -%}
/makeup/face/foundation/compact-loose-powder/luminous-silk-compact-case/3614270283604.html, /makeup/face/foundation/liquid-foundation/designer-lift-foundation/3605521491268.html, /makeup/face/foundation/liquid-foundation/power-fabric-foundation/ww-00049-arm.html, /makeup/face/foundation/liquid-foundation/maestro-fusion-makeup/AP10123.html, /makeup/face/foundation/face-fabric/ww-00115-arm.html
{%- endcapture - %}

{% if urls contains request.path %}
<div class="container-content">content</div>
{% endif %}

顯示特定的<div> setTimeout() 處的內容</div><div id="text_translate"><p>在下面的代碼中,我正在使用setTimeout()對我的后端 node.js 應用程序進行 API 調用,該應用程序每 5 秒調用一次我的 AJAX。 在我的 AJAX 成功中,我根據應至少執行一次的特定條件顯示divContent1和divContent2 。 之后,在每個setTimeout()調用中,只有divContent2應該是可見的。</p><p> <strong>索引.html</strong></p><pre> &lt;script type="text/javascript"&gt; $(document).ready(function(){ $.ajax({ url: "http://localhost:8070/api/route1", type: 'POST', dataType:'json', success: function(res) { //Some Task } }); $("#myButton").click(function(){ const route2 = function() { $.ajax({ url: "http://localhost:8070/api/route2", type: "POST", dataType: "json", data: { var1: val1 }, success: function (res) { // Various tasks if(res.flag){ $("#divContent1").hide(); $("#divContent2").show(); } else{ $("#divContent1").show(); } //Functions that handle div content data }, beforeSend: function() { $("#divContent1").hide(); $("#divContent2").hide(); }, complete: function() { setTimeout(route2,5000); }, }); }; $(function(){ route2(); }) }); }); &lt;/script&gt;</pre><p> setTimeout() 調用整個route2來處理div內容的所有顯示和插入。 但是,要求僅顯示第二次調用的divContent2 。</p><p> 尋找解決方案</p></div>

[英]Display a specific <div> content at setTimeout()

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在div中顯示URL的內容 使用JQuery根據URL的內容顯示div 顯示特定的<div> setTimeout() 處的內容</div><div id="text_translate"><p>在下面的代碼中,我正在使用setTimeout()對我的后端 node.js 應用程序進行 API 調用,該應用程序每 5 秒調用一次我的 AJAX。 在我的 AJAX 成功中,我根據應至少執行一次的特定條件顯示divContent1和divContent2 。 之后,在每個setTimeout()調用中,只有divContent2應該是可見的。</p><p> <strong>索引.html</strong></p><pre> &lt;script type="text/javascript"&gt; $(document).ready(function(){ $.ajax({ url: "http://localhost:8070/api/route1", type: 'POST', dataType:'json', success: function(res) { //Some Task } }); $("#myButton").click(function(){ const route2 = function() { $.ajax({ url: "http://localhost:8070/api/route2", type: "POST", dataType: "json", data: { var1: val1 }, success: function (res) { // Various tasks if(res.flag){ $("#divContent1").hide(); $("#divContent2").show(); } else{ $("#divContent1").show(); } //Functions that handle div content data }, beforeSend: function() { $("#divContent1").hide(); $("#divContent2").hide(); }, complete: function() { setTimeout(route2,5000); }, }); }; $(function(){ route2(); }) }); }); &lt;/script&gt;</pre><p> setTimeout() 調用整個route2來處理div內容的所有顯示和插入。 但是,要求僅顯示第二次調用的divContent2 。</p><p> 尋找解決方案</p></div> 如果存在具有特定類別的div,則顯示內容 根據網址顯示特定的div 根據URL字符串顯示內容 在打印中顯示特定div的內容 基於URL的DIV內容隱藏/顯示 根據id獲取特定的div內容 創建一個 if else 以根據 url 顯示替代 div
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM