jQuery語言切換器文本和圖像

我是jQuery的新手。此代碼爲我工作在HTML中更改文本：jQuery語言切換器文本和圖像

// Some variables for later 
var dictionary, set_lang; 

// Object literal behaving as multi-dictionary 
dictionary = { 
    "english": { 
     "_hello": "Hello", 
     "_january": "January" 
    }, 
    "portuguese": { 
     "_hello": "Oie", 
     "_january": "Janeiro" 
    }, 
    "russian": { 
     "_hello": "привет", 
     "_january": "январь" 
    } 
}; 

$(function() { 

    // Lets be professional, shall we? 
    "use strict"; 

    // Function for swapping dictionaries 
    set_lang = function (dictionary) { 
     $("[data-translate]").text(function() { 
      var key = $(this).data("translate"); 
      if (dictionary.hasOwnProperty(key)) { 
       return dictionary[key]; 
      } 
     }); 
    }; 

    // Swap languages when menu changes 
    $("#lang").on("change", function() { 
     var language = $(this).val().toLowerCase(); 
     if (dictionary.hasOwnProperty(language)) { 
      set_lang(dictionary[language]); 
     } 
    }); 

    // Set initial language to English 
    set_lang(dictionary.english); 

});

1 - 我想提高這個相同的代碼來改變一些圖像太（SRC），我該怎麼辦呢？

2-是否可以簡化此代碼？這對新手來說很難理解這種代碼：函數內的函數......呃！（有很多要研究）

在此先感謝。

P.S. 這是鏈接到原帖： jQuery language switcher

我相信這樣的事情會做的伎倆：

// Some variables for later 
var dictionary, set_lang; 

// Object literal behaving as multi-dictionary 
dictionary = { 
    "english": { 
     "_hello": "Hello", 
     "_january": "January" 
     "_imgSrc": "myStuff/img/imageEn.png" //added as a example to image change 
    }, 
    "portuguese": { 
     "_hello": "Oie", 
     "_january": "Janeiro" 
     "_imgSrc": "myStuff/img/imagePt.png" //added as a example to image change 
    }, 
    "russian": { 
     "_hello": "привет", 
     "_january": "январь" 
     "_imgSrc": "myStuff/img/imageRu.png" //added as a example to image change 
    } 
}; 

$(function() { 

    // Lets be professional, shall we? 
    "use strict"; 

    // Function for swapping text 
    set_lang = function (dictionary) { 
     $("[data-translate]").text(function() { 
      var key = $(this).data("translate"); 
      if (dictionary.hasOwnProperty(key)) { 
       return dictionary[key]; 
      } 
     }); 
    }; 

    // Function for swapping images 
     set_lang = function (dictionary) { 
      $("[src-translate]").attr("src") === function() { //here is the problem, how to implement this? 
       var key = $(this).data("translate"); 
       if (dictionary.hasOwnProperty(key)) { 
        return dictionary[key]; 
       } 
      }); 
     }; 

    // Swap languages when menu changes 
    $("#lang").on("change", function() { 
     var language = $(this).val().toLowerCase(); 
     if (dictionary.hasOwnProperty(language)) { 
      set_lang(dictionary[language]); 
     } 
    }); 

    // Set initial language to English 
    set_lang(dictionary.english);

來源

2016-11-01 4cruzeta

JavaScript與Java不一樣！ – TheValyreanGroup

1-你必須考慮一個一致的文件命名系統的翻譯圖像，以改變它的'src'的一部分。 **是的，可能** 2-抱歉，函數內部的函數是jQuery和許多編程語言的強大方面。要求避免它就像要求* knitted無結*一樣。 ;）這就是說，顯示一個圖像的HTML樣本要更改... –

- 謝謝你的努力@TheValyreanGroup，但我不知道它如何能幫助我... – 4cruzeta

我找到了一種方法，使其工作，因爲我想：

$(function() { 
 

 
    // Lets be professional, shall we? 
 
    "use strict"; 
 

 
    // Some variables for later 
 
    var dictionary, set_lang; 
 

 
    // Object literal behaving as multi-dictionary 
 
    dictionary = { 
 
     "english": { 
 
      "_hello": "Hello", 
 
      "_january": "January" 
 
     }, 
 
     "portuguese": { 
 
      "_hello": "Oie", 
 
      "_january": "Janeiro" 
 
     }, 
 
     "spanish": { 
 
      "_hello": "¡Hola", 
 
      "_january": "Enero" 
 
     } 
 
    }; 
 

 
    // Function for swapping dictionaries 
 
    set_lang = function (dictionary) { 
 
     $("[data-translate]").text(function() { 
 
      var key = $(this).data("translate"); 
 
      if (dictionary.hasOwnProperty(key)) { 
 
       return dictionary[key]; 
 
      } 
 
     }); 
 
    }; 
 

 
    // Swap languages when menu changes 
 
    $("#lang").on("change", function() { 
 
     var language = $(this).val().toLowerCase(); 
 
      if (language == "portuguese") { 
 
     $("#Bot").attr("src", "my_stuff/img/LogoPt.png").attr("alt", "Portuguese") 
 
     
 
     } else 
 
      if (language == "english") { 
 
     $("#Bot").attr("src", "my_stuff/img/LogoEn.png").attr("alt", "English") 
 
     
 
     } else 
 
      if (language == "spanish") { 
 
     $("#Bot").attr("src", "my_stuff/img/LogoEs.png").attr("alt", "Spanish") 
 
     
 
     } 
 
     if (dictionary.hasOwnProperty(language)) { 
 
      set_lang(dictionary[language]); 
 
     } 
 
    }); 
 

 
    // Set initial language to English 
 
    set_lang(dictionary.english); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select id="lang"> 
 
    <option>English</option> 
 
    <option>Portuguese</option> 
 
    <option>Spanish</option> 
 
</select> 
 
<span data-translate="_hello">Hello</span>, 
 
<span data-translate="_january">January</span>! 
 
<br> 
 
<br> 
 
<img id="Bot" src="my_stuff/img/Logo.png" class="img-circle img-responsive" alt="english">

感謝你的努力的朋友。

來源

2016-11-16 14:58:57 4cruzeta

jQuery語言切換器文本和圖像

回答

相關問題