javascript - 用 jQuery 条件替换 CSS 属性

标签 javascript jquery css

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

相关文章:

javascript - 操作多个子组件的状态

css - `:target` 样式在 IE11 中表现异常

javascript - 使用 tablesorter 和 <div> 正确排序日期

javascript - Ajax 请求在第二次调用后不更新下拉菜单

javascript - rails 4 : Jquery code only renders sometimes

javascript - 将 URL 中的 '?' 传递给 ajax 调用时出现问题

jquery - iPhone:jQuery scroll() 事件仅在发布时触发

html - div的位置放在FORM旁边

css - 任何用于检查属性名称是否以值开头的选择器?

javascript - 访问和单击没有 ID 或类标签的按钮