Question

我想更改用于在我的网站上切换语言的链接的背景图片。我的方法是检查标签内的语言代码，然后使用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')");
        }
    }
});

Answer 1

锚点元素没有val()可以返回。

使用text()或data-属性

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

e.g。

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()来迭代它们：

e.g。

$(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(){

的便捷快捷方式

用jQuery条件替换CSS属性

1 个答案:

更新