用jQuery条件替换CSS属性 [英] Replace CSS property with jQuery conditional

问题描述

我想更改用于切换网站语言的链接的背景图片.我的方法是检查标记中包含哪种语言代码，然后使用jQuery更改背景图片.

I want to change the background image of a link used to switch the language on my website. My approach was to check which language code is inside the tags, and then change the background image using jQuery.

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

The code below changes the background image to the first background-image in the conditional statement. But when the conditional is not met, and the second statement should be executed, it still executes the first (or fails to execute somehow). The console shows no errors.

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

The last li-element is generated by a PHP script, which could be tweaked to include a -data attribute as suggested in the comments. Which would be an excellent improvement. At the current time it just returns the language code as plain text in a list item.

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

推荐答案

Anchors元素没有返回的val().

Anchors elements do not have a val() to return.

使用text()或data-属性

此外(如@Fabrizio Calderan所述)，您正在使用分配=，而不是比较==或===

Also (as @Fabrizio Calderan mentioned) you are using a assign = and not compare == or ===

例如

if ( $l == 'NL' )

也为@A.沃尔夫指出，您的选择器也损坏了(它在锚中寻找锚):

Also as @A. Wolff points out, your selector is broken too (it looks for an anchor within the anchor):

例如，这足以找到锚点:

e.g this is enough to find the anchor:

$( "ul#menu-top li:last-child > a" )

您最好的选择是使用包含国家/地区代码的数据属性.然后，您可以使用它们来选择图像.

Your best bet is to use data- attributes that contain the country code. Then you can use them to select the image.

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

更新:

重新阅读后，我发现您显然想对所有您的标志链接进行此操作.

Update:

After re-reading, I see you apparently want to do this to all your flag links.

在这种情况下，请使用each()对其进行迭代:

In that case use each() to iterate them:

例如

$(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属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！