使用 jQuery javascript 根据域显示内容

Question

大家好，我有一个网站有两个域名，一个是 .com，另一个是 .us 我正在尝试让它显示所选国家/地区域的标志，因此如果单击 link 指向 .us，我想显示美国国旗：

到目前为止我已经做到了，但有时可以，但有时不行，我不知道为什么！

HTML:

<li>Currency <img class="usd-flag" style="display:none" src="/images/usd-flag.svg" width="20" height="14" alt="USD CURRENCY $;"/><img class="gbp-flag" style="display:none" src="/images/gbp-flag.svg" width="20" height="14" alt="GBP CURRENCY &pound;"/>
<ul>
<li><a href="http://www.example.com">BRITISH POUNDS ( &pound; ) </a></li>
<li><a href="http://www.example.us">US DOLLARS ( $ )</a></li>
</ul>
</li>

JS:

if(location.href.indexOf('.us') >= 0) {
        $('.usd-flag').show();
        $('.gbp-flag').hide();
    }
if(location.href.indexOf('.com') >= 0) {
        $('.gbp-flag').show();
        $('.usd-flag').hide();
    }//changes flag image depending on domain

有人能告诉我这里有什么问题吗？

Answer 1

您可以先将 location.href.indexOf 更改为 location.href.toLowerCase().indexOf，这样它将支持 url 作为 .COM

Answer 2

在我的脑海中，我建议使用 document.domain 而不是 location.href，因为它具有更好的解析输出，但我认为您只是忘记了需要等待 DOM 在修改它的元素之前准备好。正如您使用 jQuery 标记的那样，您可以使用以下内容。没有它，您将需要一个文档事件处理程序（jQuery 只是为您包装）。

$(document).ready(function () {

    console.log(location.href)
    console.log(document.domain)

    if (location.href.indexOf('.us') >= 0) {
        $('.usd-flag').show();
        $('.gbp-flag').hide();
    }
    if (location.href.indexOf('.com') >= 0) {
        $('.gbp-flag').show();
        $('.usd-flag').hide();
    } //changes flag image depending on domain

});

FIDDLE

Answer 3

您可以使用 liquid if else 语句并使用 contain 来执行此操作。

{% if {{globals.site.host}} contains '.us' %}

<div>this is a .us domain</div>

{% else %} 

<div>This is a .com domain</div>

{% endif %}

或者您也可以使用 2 个 if 语句。而不是其他取决于你需要什么。

此处使用 AU 域的临时示例。

http://liquiddev.rtweb.com.au/domain

希望对您有所帮助！

使用 jQuery javascript 根据域显示内容

Show content depending on domain using jQuery javascript

javascript

subdomain

jquery

cross-domain

business-catalyst