Question

这里遇到了问题，过去几天我一直在拉头发......

我正在为网站制作一种语言过滤功能，它是一个单击某种语言的菜单，它会过滤掉其余部分。由于我有很多不同的语言，我认为最好循环所有内容而不是制作15个相同的代码。

这是我的代码：

// >>> Language click effects
    for(langClickNum = 1; langClickNum < langList.length; langClickNum++) {

        $('#lang'+langList[langClickNum]).click(function() {
            if (!langSelect[langClickNum]) {

                clrSearch();
                clrLang();
                langHide();

                $('#lang'+langList[langClickNum]).addClass('langCheck');
                $('.itemLang'+langList[langClickNum]).show();
                langSelect[langClickNum] = true;
            }
            else {
                clrLang();
                langShow();
            }
        });

    }

正如您在click函数中看到的那样，我想使用循环计数器编号从不同的数组中选择索引。但是，由于click函数内部的脚本无法运行，除非我单击它，否则它将无法捕获正确的数组编号。相反，它会为我单击的每种语言选择最后一个数组编号。我很清楚问题是什么，但我不知道如何解决它。请帮助我！

如果我给它数字不循环它就可以了，就像这样：

$('#lang'+langList[1]).click(function() {
        if (!langSelect[1]) {

            clrSearch();
            clrLang();
            langHide();

            $('#lang'+langList[1]).addClass('langCheck');
            $('.itemLang'+langList[1]).show();
            langSelect[1] = true;
        }
        else {
            clrLang();
            langShow();
        }
});

我希望你能看到我的问题。

Answer 1

几个月前我遇到过类似的问题。你会这样做：

$('#lang'+langList[langClickNum]).click(function(langClickNum) {
    return function() {
        if (!langSelect[langClickNum]) {

            clrSearch();
            clrLang();
            langHide();

            $('#lang'+langList[langClickNum]).addClass('langCheck');
            $('.itemLang'+langList[langClickNum]).show();
            langSelect[langClickNum] = true;
        }
        else {
            clrLang();
            langShow();
        }
    }
});

原因是所有点击处理函数共享相同的闭包环境，因此变量langClickNum对于所有这些都是相同的。如果你需要langClickNum为每个都不同，你需要将它传递给函数，该函数实际上会为该函数的闭包创建一个langClickNum的副本。不确定我是否完美地解释了它......

Answer 2

问题与JS变量作用域/闭包的概念有关。

当你绑定'click'处理程序时，langClickNum的值迭代正常，但是当执行click处理程序时，'langClickNum'已经等于langList.length。

你可以做点什么：

for(x = 1; x < langList.length; x++) {      
    (function(){
        var langClickNum = x;   
        $('#lang'+langList[langClickNum]).click(function() {//... rest of your code}
    })();
}

这里，由于JS中的函数作用域，langClickNum的值将如您所愿。

查看更多信息： https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope

Answer 3

不是使用for循环，而是使用计数器遍历DOM中的lang对象。

<script type="text/javascript">
    jQuery(document).ready(function () {
        var _LangList = ['lang1', 'lang2', 'lang3', 'lang4', 'lang5'];
        var _iCurrLangIndex = 0;
        var _iIndex = 0;
        jQuery.each(jQuery('#lang_list').children(), function () {
            var _oCurrLangObj = jQuery(this).click(function () {
                var __iThisItemsIndex = parseInt(jQuery(this).attr('data-lang-index'));
                // Code Here
            }).attr('data-lang-index', _iIndex++);
        });
    });
</script>

<div id="lang_list">
    <div id="lang0"></div>
    <div id="lang1"></div>
    <div id="lang2"></div>
    <div id="lang3"></div>
    <div id="lang4"></div>
</div>

同样，为了选择一个值，我只需使用1个全局索引var（_iCurrLangIndex）来管理使用的值，如果可能的话，将其设置为0。

jQuery单击循环内的函数。不能影响函数内的数字

3 个答案: