我想更改用于在我的网站上切换语言的链接的背景图片。我的方法是检查标签内的语言代码,然后使用 jQuery 更改背景图像。
下面的代码将背景图像更改为条件语句中的第一个背景图像。但是当条件不满足,应该执行第二条语句时,它仍然执行第一条(或者以某种方式执行失败)。控制台没有显示任何错误。
最后一个 li 元素是由 PHP 脚本生成的,可以对其进行调整以包含注释中建议的 -data 属性。这将是一个很好的改进。目前,它只是将语言代码作为列表项中的纯文本返回。
HTML
<nav id="top-menu">
<ul id="menu-top" class="nav et_disable_top_tier sf-js-enabled">
<li id="menu-item-263"><a href="/">Home</a></li>
<li id="menu-item-265"><a href="services">Services</a></li>
<li id="menu-item-412"><a href="/blog/">Blog</a></li>
<li><a href="/en/" style="background-image: url(https://www.example.nl/wp-content/themes/GH/images/flagUK.gif);">EN</a></li>
</ul>
</nav>
CSS
ul#menu-top > li:last-child > a {
text-indent: -9999px;
display: block;
height: 12px;
width: 18px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
jQuery 代码:
$(document).ready(function(){
lang_flags_append();
function lang_flags_append() {
var $l = $( "ul#menu-top > li:last-child > a" ).text();
console.log($l);
$( "ul#menu-top li:last-child > a" ).css("background", "");
if ( $l = 'EN' ) {
$( "ul#menu-top > li:last-child > a" ).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flagUK.gif')");
} else if ($l = 'NL') {
$( "ul#menu-top > li:last-child > a" ).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flagNL.gif')");
}
}
});
最佳答案
anchor 元素没有要返回的 val()
。
使用text()
或data-
属性
此外(如@Fabrizio Calderan 所述)您使用的是赋值 =
而不是比较 ==
或 ===
例如
if ( $l == 'NL' )
也作为@A。 Wolff 指出,你的选择器也坏了(它在 anchor 中寻找 anchor ):
例如这足以找到 anchor :
$( "ul#menu-top li:last-child > a" )
最好的办法是使用包含国家代码的数据属性。然后您可以使用它们来选择图像。
$(document).ready(function(){
var lang = $( "ul#menu-top li:last-child > a" ).data('lang');
$( "ul#menu-top > li:last-child > a" ).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flag" + lang + ".gif')");
});
你的主播会有
<a href="blahblah" data-lang="NL">My anchor</a>
更新:
重新阅读后,我发现您显然想对所有您的标记链接执行此操作。
在那种情况下使用 each()
来迭代它们:
例如
$(function(){
$( "ul#menu-top li > a" ).each(function(){
var lang = $(this).data('lang');
$(this).css("background-image", "url('https://www.example.nl/wp-content/themes/GH/images/flag" + lang + ".gif')");
});
});
注意:$(function(){
只是 $(document).ready(function(){
关于javascript - 用 jQuery 条件替换 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31558228/