变量值意外变化

Question

我有一个JavaScript（jQuery）代码，可以根据其他字段值切换某个字段集。

解释代码：

以下是HTML：http://jsfiddle.net/jKU9h/我很抱歉，因为HTML因为使用PHP生成而有点混乱。但是，它仍然可读。

宣布全球变量：

var first = true, // initial value
    dynamic_fieldset, // the value is set in the code below
    form, // selector of the form, the value is okay.
    origin_fixRel; // value for this var is set somewhere in the code, the value is okay.

这里我绑定了change事件，并设置了一个全局var first。第一次更改选择框时，它会复制当前字段集。

    $('body').on('change','#efixRel', function() {

        var $value = $(this).val();

        if(first) {
            dynamic_fieldset = $('#editRecordForm .formContainer fieldset:last-child').clone(true,true);
            first = false;
        }

var origin_fixRel来自代码的另一部分，假设var保持正确的值。在这里，我检查用户是否在更改之前选择了选项。如果他这样做，我删除当前的字段集，然后追加之前的克隆字段集。

if(origin_fixRel == $value) {
            form.find('fieldset').eq(1).remove();
            form.find('.formContainer').eq(0).append(dynamic_fieldset);
        } else {

如果他没有并且他选择了另一个选项（例如，当他从初始值变为另一个值时的第一种情况），只需根据他选择的选项更改字段集

switch($value) {

                case 'fix':
                    //reset divs 
                    $('#editRecordForm .formContainer fieldset').eq(1).find('div').each(function() {$(this).removeClass('editShow').addClass('hidden');});
                    // fill the time selecting - first clear previous data
                    $('#eminutes, #ehours').empty();
                    for(i=0; i<=59;i++){
                        var append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#eminutes').append(append);
                    }
                    for(i=0; i<=23;i++){
                        append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#ehours').append(append);
                    }
                    $('#editRecordForm .formContainer .hidden').eq(0).removeClass('hidden').find('label').text('שעה:');
                break;

                case 'rel':
                    //reset divs 
                    $('#editRecordForm .formContainer fieldset').eq(1).find('div').each(function() {$(this).removeClass('editShow').addClass('hidden');});
                    // fill the time selecting - first clear previous data
                    $('#eminutes, #ehours').empty();
                    for(i=0; i<=59;i++){
                        var append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#eminutes').append(append);
                    }
                    for(i=0; i<=12;i++){
                        append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#ehours').append(append);
                    }
                    $('#editRecordForm .formContainer .hidden').eq(0).find('label').text('זמן:');
                    $('#editRecordForm .formContainer .hidden').removeClass('hidden');
                break;
            }

        }



    });


    return false;
});

当我从初始值更改时，我创建了预加载字段集的克隆及其所有数据。我希望每当我改回初始值时，克隆的字段集将被插回。这就是代码实际上做了什么，但由于一些奇怪的原因，它第一次起作用，在1次更改后，全局变量window.origin_dynamic_fieldset决定改变它自己的值，现在又持有另一个fieldset（另一个字段集是更改选项的结果，导致更改字段集）。

为方便起见，这里是一部分的整个代码：

    $('body').on('change','#efixRel', function() {

        var $value = $(this).val();

        if(first) {
            dynamic_fieldset = $('#editRecordForm .formContainer fieldset:last-child').clone(true,true);
            first = false;
        }

        if(origin_fixRel == $value) {
            form.find('fieldset').eq(1).remove();
            form.find('.formContainer').eq(0).append(dynamic_fieldset);
        } else {

            switch($value) {

                case 'fix':
                    //reset divs 
                    $('#editRecordForm .formContainer fieldset').eq(1).find('div').each(function() {$(this).removeClass('editShow').addClass('hidden');});
                    // fill the time selecting - first clear previous data
                    $('#eminutes, #ehours').empty();
                    for(i=0; i<=59;i++){
                        var append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#eminutes').append(append);
                    }
                    for(i=0; i<=23;i++){
                        append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#ehours').append(append);
                    }
                    $('#editRecordForm .formContainer .hidden').eq(0).removeClass('hidden').find('label').text('שעה:');
                break;

                case 'rel':
                    //reset divs 
                    $('#editRecordForm .formContainer fieldset').eq(1).find('div').each(function() {$(this).removeClass('editShow').addClass('hidden');});
                    // fill the time selecting - first clear previous data
                    $('#eminutes, #ehours').empty();
                    for(i=0; i<=59;i++){
                        var append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#eminutes').append(append);
                    }
                    for(i=0; i<=12;i++){
                        append = i<10 ? "0"+i : i;
                        append = '<option>'+append+'</option>';
                        $('#ehours').append(append);
                    }
                    $('#editRecordForm .formContainer .hidden').eq(0).find('label').text('זמן:');
                    $('#editRecordForm .formContainer .hidden').removeClass('hidden');
                break;
            }

        }



    });


    return false;
});

Answer 1

$value = $(this).val();

您在这里设置window.$value = $value，因此可以在ALL函数的全局范围内访问它。您需要使用var关键字声明变量，以防止意外行为。