Question

http://jsfiddle.net/motocomdigital/Qh8fL/4/

如果您认为我说错了，请随时更改标题。

常规

我正在使用多语言控制运行wordpress网站。我的菜单/导航是动态的，通过wordpress管理员控制。多语言语言插件还会更改动态菜单/导航内容以及页面内容。

我的联系按钮位于动态导航中，使用jQuery打开一个滑动菜单。使用顶级css非常简单的动画。联系人按钮在页面上两次，因此我没有使用.toggle进行迭代。 See jsFiddle

脚本

var $button  = $(".contact-button"),
    // var for button which controls sliding div
    $slide   = $("#content-slide");
    // var for the div which slides up and down

$button.on('click', function () {
    // function for when button is clicked

    if ($button.html() == 'Close') {
        // run this if button says 'Close'

        $slide.stop().animate({ top: "-269px" }, 300);
        // close slide animation
        $button.html('Contact');
        // change text back to 'Contact'


    } else {
        // else if button says Contact or anything else

        $slide.stop().animate({ top: "0" }, 300);
        // open slide animation
        $button.html('Close');
        // change text to 'Close'
    }
});

问题

因为我在网站上运行多语言。导航拼写会发生变化。 See jsFiddle flag buttons for example。这很好，动画仍然运行正常，因为它使用按钮类'contact-button'。

但是因为我使用.html将按钮的文本替换为“关闭”，然后在第二次迭代时返回“联系” - 显然这是其他语言的问题，因为它总是更改为英语'close'并返回英语'联系'

但是我需要迭代才能完成的三种语言和单词是......

联系 - 关闭
Contatto - Cerca
Contacto - Chiudere

任何人都可以帮我扩展我的脚本以容纳三种语言，我的所有尝试都失败了。 jsFiddle有脚本。

小提琴中的语言功能仅用于演示目的，因此可以从头开始测试迭代序列。我知道如果你在菜单打开时改变语言（在小提琴中），它会混淆它。但是当我的网站上的语言发生变化时，整个页面会刷新，从而关闭幻灯片并重置序列。所以没关系。

任何亲的帮助都会非常棒，谢谢！

我的不良尝试，但你可以看到我想要实现的目标

var $button  = $(".contact-button"),
    // Var for button which controls sliding div
    $slide   = $("#content-slide");
    // Var for the div which slides up and down

$button.on('click', function () {
    // function for when button is clicked

    if ($button.html() == 'Close' || 'Cerca'|| 'Chiudere' ) {
        // run this if button says Close or Cerca or Chiudere

        $slide.stop().animate({ top: "-269px" }, 300);
        // Close slide animation

        $(function () {
            if ($button.html(== 'Close') {
                $button.html('Contact'); }
            else if ($button.html(== 'Cerca') {
                $button.html('Contatto'); }
            else ($button.html(== 'Chiudere') {
                $button.html('Contacto'); }
        });
        // Change text back to Contact in correct language

    } else {
        // else if button says Contact or anything else

        $slide.stop().animate({ top: "0" }, 300);
        // Open slide animation

        $(function () {
            if ($button.html(== 'Contact') {
                $button.html('Close'); }
            else if ($button.html(== 'Contatto') {
                $button.html('Cerca'); }
            else ($button.html(== 'Contacto') {
                $button.html('Chiudere'); }
        });
        // Change text back to Close in the correct language

    }
});

请参阅上面的我的尝试脚本，该脚本无效jsFiddle。

Answer 1

以下是一个有效的例子：http://jsfiddle.net/Qh8fL/2/

当单击其中一个语言按钮时，它会使用jQuery的.data()方法存储Contact和Close的字符串。然后，当单击联系人/关闭按钮时，它会引用这些字符串而不是硬编码。

以下是相关的代码行：

$("#english").click(function() {
    $(".contact-button").html('Contact').data('langTxt',{contact:'Contact',close:'Close'});
});

$("#spanish").click(function() {
    $(".contact-button").html('Contatto').data('langTxt',{contact:'Contatto',close:'Close'});
});

$("#italian").click(function() {
    $(".contact-button").html('Contacto').data('langTxt',{contact:'Contacto',close:'Close'});
});

if ($button.html() == 'Close') {
    //...
    $button.html($button.data('langTxt').contact);
} else {
    //...
    $button.html($button.data('langTxt').close);
}

您需要做的就是通过编辑每个点击事件中发生的close调用内的data()属性来正确修改“关闭”文本。

Answer 2

您永远不应该依赖标签字符串...尤其是在多语言环境中。相反，您应该使用存储在属性中的占位符（可能使用.data()）。然后根据属性的值为标签编写自己的setter。

var myLabels = {'close': ['Close', 'Cerca', 'Chiudere'], 'contact' : ['Contact', 'Contatto', 'Contacto']};

var currLang = 2; // to select italian

....

// to set the label
$button.data('mylabel', 'close');
$button.html(myLabels['close'][currLang]);
....

if($button.data('mylabel') == 'close') {
    $button.data('mylabel', 'contact');
    $button.html(myLabels['contact'][currLang]);
} else {
    $button.data('mylabel', 'close');
    $button.html(myLabels['close'][currLang]);
}

jQuery根据.html（'string'）值有条件地更改事件

2 个答案: