1

这里有问题，最近几天我一直在拉我的头发......

我正在为网站制作一种语言过滤器功能，它是一个菜单，您可以在其中单击一种语言，然后过滤掉其余的语言。由于我有很多不同的语言，我认为最好循环所有内容，而不是制作 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 函数中看到的那样，我想使用循环计数器编号从不同的数组中选择索引。但是由于单击函数中的脚本会运行，除非我单击它，否则它不会捕获正确的数组编号。相反，它会为我单击的每种语言选择最后一个数组编号。我很清楚问题是什么，但我不知道如何解决它。请帮帮我！

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

$('#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();
        }
});

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

4

3 回答 3

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 的副本。不知道我解释的是否完美...

于 2012-09-30T18:47:30.797 回答
0

问题与 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}
    })();
}

在这里， langClickNum 的值将如您所愿，因为 JS 中的函数作用域。

有关更多信息，请参阅： https ://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope

于 2012-09-30T19:05:35.837 回答
0

与其使用 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 开始。

于 2012-09-30T19:18:38.363 回答