Javascript 用jQuery条件替换CSS属性

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

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

最后一个li元素是由PHP脚本生成的，可以根据注释中的建议对其进行调整以包含-data属性。这将是一个极好的改进。目前，它只是在列表项中以纯文本形式返回语言代码

HTML

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')");
        }
    }
});

---

锚元素没有要返回的

val（）

使用

text（）

或

data-

属性

此外（正如@Fabrizio Calderan所提到的），您使用的是赋值

=

，而不是比较

=

或

==

e、 g

正如@A.Wolff指出的，您的选择器也坏了（它在锚点中查找锚点）：

e、 g这足以找到锚：

$( "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>

---

注意：

$（function（）{

只是

$（文档）的一个方便快捷方式。就绪（function（）{

如果（$l=='NL'））

：您正在分配，而不是比较。这就是为什么始终执行第一个分支。锚元素不能包含另一个锚元素，选择器或HTML标记中有错误。对于其余部分，正如我所看到的，请参阅@TrueBlueAussie的asnwserAdded更新，以涵盖我认为您需要的内容。请提供类似于此示例的HTML为避免混淆。您当前的代码是硬连接的，只能处理第一个链接（从外观上看）。请解释否决票。不要只是点击并运行！：）

$（“ul#菜单顶部li:last child>a”）。查找（“a”）

看起来也不对；）@A.Wolff:谢谢。还添加了这个以及其他建议。错误太多…时间太少：）我使用了text（）函数，它返回了正确的值。我还删除了.find（“A”）因为我已经选择了标记。但是，条件语句在所有情况下仍然返回第一个值。我已经更新了上面的代码。请a）按照我的建议用数据属性替换代码，b）提供HTML，因为我们看不出为什么选择

最后一个子链接：）
$( "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>

$(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')");
   });
});