用 jQuery 条件替换 CSS 属性

Question

我想更改用于在我的网站上切换语言的链接的背景图片。我的方法是检查标签内的语言代码，然后使用 jQuery 更改背景图像。

下面的代码将背景图像更改为条件语句中的第一个背景图像。但是当条件不满足，并且应该执行第二个语句时，它仍然执行第一个（或以某种方式执行失败）。控制台没有显示错误。

最后一个 li 元素由 PHP 脚本生成，可以根据 cmets 中的建议对其进行调整以包含 -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')");
        }
    }
});

Answer 1

Anchors 元素没有要返回的val()。

使用text() 或data- 属性

另外（正如@Fabrizio Calderan 提到的）您正在使用分配= 而不是比较== 或===

例如

if ( $l == 'NL' )

也称为@A。 Wolff 指出，你的选择器也坏了（它在锚中寻找锚）：

例如，这足以找到锚点：

$( "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(){ 的便捷快捷方式