jQuery 根据 .html( 'string' ) 值有条件地更改事件

Question

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

如果您认为我的措辞有误，请随时更改标题。

常规

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

我的联系人按钮，在动态导航中，使用jQuery打开一个滑动菜单。使用 top 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 将按钮的文本替换为“关闭”，然后在第二次迭代中，回到“联系” - 显然这对于​​其他语言来说是一个问题，因为它总是更改为英语“关闭”并返回英语“联系”

但是我需要迭代运行的三种语言和单词是......

联系 - 关闭
联系方式 - Cerca
联系方式 - 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() 方法存储联系和关闭的字符串。然后，当点击联系/关闭按钮时，它会引用这些字符串，而不是硬编码。

以下是相关的代码行：

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

要适当地修改“关闭”文本，您只需编辑在每个点击事件中发生的对 data() 的调用中的 close 属性。

Answer 2

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

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]);
}