Question

在HTML中，我有一些图像和javascript函数。

<img onmouseover="repl()" class="EN" ... />
<img onmouseover="repl()" class="FR" ... />
...

当用户在图像上时。我想根据所选语言更改标题文本。

我需要一种方法在javascript中对我的函数的发送者进行“引用”。但我不知道因为我多年没有使用过javascript。请帮帮我！

function repl() {

    // Missing Solution 
    // var lang = sender.attr("class"); <= Please correct me

    var headerText = "";
    if (lang == 'FR') {
        headerText = "Cliquez sur le drapeau"
    } else {
        headerText = "Click on flag"
    }

Answer 1

最好的解决方案是使用addEventListener绑定事件。为所有图像提供相同的类，选择它们，然后添加事件。我还建议使用data-* attributes来存储语言。

<img class="repl" data-lang="EN" ... />
<img class="repl" data-lang="FR" ... />

然后在你的JavaScript中：

window.onload = function(){// Make sure DOM is ready
    // Get the images
    var imgs = document.getElementsByClassName('repl');

    // Loop over them
    for(var i = 0, len = imgs.length; i < len; i++){
        // Add the event
        imgs[i].addEventListener('mouseover', function(){
            // Get the language. "this" is the element we hovered over
            var lang = this.getAttribute('data-lang');

            var headerText = "";
            if (lang == 'FR') {
                headerText = "Cliquez sur le drapeau"
            } else {
                headerText = "Click on flag"
            }
        });
    }
};

DEMO：http://jsfiddle.net/cT7Tj/1/

Answer 2

首先，您需要将发件人发送到您的函数：

<img onmouseover="repl(this)" class="EN" ...

然后：

function repl(sender) {
//you have the element that sent the event
    var lang = sender.getAttribute('data-lang');
    var headerText = "";
    if (lang == 'FR') {
        headerText = "Cliquez sur le drapeau"
    } else {
        headerText = "Click on flag"
    }
}

Answer 3

var lang = this.getAttribute('class');

您应该使用“data-lang”属性。

Answer 4

    function repl() {

   var lang = navigator.language || navigator.userLanguage; //this will fetch the current browser language   
   var headerText = "";

   switch (lang) {
       case 'fr':
           document.getElementById('your_id').innerHTML = "Cliquez sur le drapeau";
           break;
       default:
           document.getElementById('your_id').innerHTML = "Click on flag"
   }

如何知道javascript函数的发件人？

4 个答案: