Question

所以javascript并不是我的强项。我在一些元素上放置一个简单的单击事件处理程序，如果我手动将处理程序附加到需要它的每个元素上，它就可以正常工作：

$('#box-content-fr-tab').click(function () {
    switchLang('menu', 'fr');
});

$('#box-content-nl-tab').click(function () {
     switchLang('menu', 'nl');
});

//etc

function switchLang(currentField, currentLang){
    $('#box-'+currentField+'-'+currentLang+'-tab').addClass('active');
    $('#box-'+currentField+'-'+currentLang).addClass('active show');

    for(oLang in $.object.langues){
        if(oLang !== currentLang && oLang !== 'end'){
            $('#box-'+currentField+'-'+oLang+'-tab').removeClass('active');
     $('#box-'+currentField+'-'+oLang).removeClass('active show');
        }
    }
}

我不想在每个元素上手动附加onClick处理程序，但是当我天真地尝试遍历列表时，我遇到了currentLang和currentField变量的范围问题。我试过像：

for(lang in this.langues){
    if(lang !== 'end'){
       var currentLang = lang;
        $('#box-content-'+lang+'-tab').click(function(){
            switchLang(currentField, currentLang);
        });
    }
}

但它没有用。关于如何让它变得更有活力的任何想法？

Answer 1

正如其他人所述，您可以使用let关键字，在您的情况下甚至不需要变量，除非您需要对其进行一些处理。

this.langues.forEach((lang) => {
  if (lang !== 'end') {
    $('#box-content-' + lang + '-tab').click(() => {
      switchLang(currentField, lang);
    });
  }
});

否则，如果你一直迭代到数组的末尾，除非你需要其他东西，否则你不需要检查'end'，因此：

this.langues.forEach((lang) => {
    $('#box-content-'+lang+'-tab').click(function(){
        switchLang(currentField, lang);
    });
)};

Answer 2

最好做一些简单的事情，比如

Observable

Answer 3

我使用这样的东西，它应该可以正常工作，因为lang只是一个我理解的字符串，但你应该记住，在某些旧的浏览器中不支持let：

for(let lang in this.langues){
    if(lang !== 'end'){
        $('#box-content-'+lang+'-tab').click(function(){
            switchLang(currentField, lang);
        });
    }
}

如果您尝试迭代直到数组/对象的结尾，您甚至不需要检查lang !== 'end'，因此：

for(let lang in this.langues){
    $('#box-content-'+lang+'-tab').click(function(){
        switchLang(currentField, lang);
    });
}

eventHandler

3 个答案: