我是jQuery的初学者,所以这段代码对吗?此外,当页面加载时,我如何调用它?
我需要说的是,如果皮肤是"white"
,请将网站徽标更改为黑色徽标。
if ($("#themestyle").attr('href', "/web/assets/css/skins/white.css")) {
$("#logo").attr('src', "/web/assets/images/LogoBlack.png");
} else {
$("#logo").attr('src', "/web/assets/images/Logowhite.png");
}
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="icon" href="/web/assets/images/favicon.ico">
<title>
<asp:Literal runat="server" Text="Test Website" />
</title>
<link rel="stylesheet" href="/web/assets/css/skins/blue.css" id="themestyle" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar-brand">
<img src="/web/assets/images/Logowhite.png" id="logo" />
</div>
</body>
问题是因为您在if()
中使用了attr()
的setter。这将设置href
属性,然后返回一个包含link
元素的jQuery对象。当强制为布尔值时,它将始终返回true
。
要解决此问题,请使用attr()
的getter,并使用==
将其与已知的href
进行比较,如下所示:
var filename = 'LogoBlack.png';
if ($("#themestyle").attr('href') == "/web/assets/css/skins/white.css") {
filename = 'Logowhite.png';
}
$("#logo").attr('src', '/web/assets/images/' + filename);
或者,您可以使用三元表达式。它们更简洁,但可以说更难阅读:
var filename = $("#themestyle").attr('href') == "/web/assets/css/skins/white.css" ? 'LogoBlack.png' : 'Logowhite.png';
$("#logo").attr('src', '/web/assets/images/' + filename);