視的.html（「字符串」）jQuery的條件發生變化的事件值

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的被替換的按鈕爲「關閉」，然後在第二次迭代，文回「聯繫」 - 顯然，這是對其他語言的問題，因爲它總是變化英語「關閉」，回到英語「聯繫」

但我的三種語言，而我需要的迭代貫穿的話......

聯繫 - 關閉
Contatto - CERCA
CONTACTO - Chiudere

C任何人都可以幫助我擴展我的腳本以適應三種語言，我所有的嘗試都失敗了。 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); 
} 

所有你需要做的修改「關閉」文本適當地是通過編輯電話裏面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]); 
}