0

我有一个网站和两个域名。如果访问者转到 www.SampleSiteA.com 上的页面，我希望图像“A”出现，但如果在 www.SampleSiteB.com 的页面上应该出现图像“B”。

不幸的是，我下面的代码结果是空白的，根本没有图像出现。有任何想法吗？

文件内容：welcome.html

<html>
<head>
     <script src="resources/js/domain.js" type="text/javascript"></script>
</head>
<body>
     <div class="welcomepic"></div>
</body>
</html>

文件内容：styles.css

.picForA{
    background-image: url('../img/A.png');
}
.picForB{
    background-image: url('../img/B.png');
}
.welcomepic{
    background-position:left center;
    background-repeat: no-repeat;
    padding-left:160px;
    width:225px;
    float:left;
    height:100px;
    display: block;
}

文件内容：domain.js

function welcomepic() {
    if (location.hostname == 'www.SampleSiteA.com') {
        $('.welcomepic').addClass('picForA');
    } else {
        $('.welcomepic').addClass('picForB');
    }
}
4

1 回答 1

2

你不调用你的函数。一种解决方案是将以下代码添加到 html 的头部。

$( document ).ready(function() {
welcomepic();
});

您还需要在 welcompic 函数中删除先前设置的类，否则您将得到双重类。

function welcomepic() {
    if (location.hostname == 'www.SampleSiteA.com') {
        $('.welcomepic').removeClass('picForB').addClass('picForA');
    } else {
        $('.welcomepic').removeClass('picForA').addClass('picForB');
    }
}
于 2013-09-18T22:19:04.023 回答