Question

在下面的脚本中，我试图通过选择列表进行解析，并为每个选项调用一个php，它根据选项“value”属性返回一个值（psuedo true / false）。

然而，当我在$ .get内部[评估返回值并对每个（）中的当前选项执行脚本时，我无法弄清楚如何引用当前选项元素以便修改它。

$('#my_Select').click(
    function(){ 
        $('#my_Select option').each(
            function(){
                $.get(
                    '<?php echo getStyle.php',{option: $(this).val()},
                    function(response){
                        alert($(this).val()); //Returns empty alert. Should return value of current option
                        //$(this).attr("disabled","disabled");
                        //if (response.Success){$(this).attr("disabled","disabled");}
                    });
            });
    });

这是php脚本供参考......

<?php 
    //getStyle.php

    $myOption = $_REQUEST['option'];
    $file = "styles/".$myOption."/style.css";
    //echo json_encode(file_exists($file));
        if (!file_exists($file))
        {
        $Response = array('Success' => true);
        }
        else
        {
        $Response = array('Success' => false);
        }
    echo json_encode($Response);
?>

Answer 1

this成功回调中的

get将不再引用该元素（任何时间有一个新函数，函数内的this可能是与this之外的$('#my_Select').click( function(){ $('#my_Select option').each( function(){ // ===> Remember the option here, in a variable your callback will close over var option = $(this); $.get( '<?php echo getStyle.php',{option: option.val()}, function(response){ // ===> Use the variable below alert(option.val()); //Returns empty alert. Should return value of current option //option.attr("disabled","disabled"); //if (response.Success){option.attr("disabled","disabled");} }); }); });不同，可能是; more here）。

您可以使用已有的闭包来解决这个问题：

ajax

或者您可以使用get而不是get（context只是一个包装器）并使用this参数告诉jQuery使用什么{{1调用你的回调时：

$('#my_Select').click(
    function(){ 
        $('#my_Select option').each(
            function(){
                $.ajax({
                   url:     '<?php echo getStyle.php',
                   data:    {option: $(this).val()},
                   context: this,
                   success: function(response){
                            alert($(this).val()); //Returns empty alert. Should return value of current option
                            //$(this).attr("disabled","disabled");
                            //if (response.Success){$(this).attr("disabled","disabled");}
                       }
                    });
            });
    });

修改：下面，@哈克尔问，参考上面的第一个例子：

由于并发性，回调函数中option的值是不可预测的？

答案是否定的，但这是一个非常好的问题。原因在于JavaScript如何解析自由符号（例如，独立的“变量”名称）以及闭包如何工作的核心。

当调用函数时，JavaScript解释器为该特定函数调用创建一个称为“执行上下文”的东西。执行上下文有一些我们称之为“变量对象”的东西，它包含变量，并且与函数的这个特定调用有关（技术上它们是在[deep breath] 绑定对象上保存的。执行上下文的变量上下文 - 得爱说规范。）

在该函数调用中创建的函数保持对创建它们的执行上下文的变量对象的引用;这就是闭包的工作原理。解释器通过查看此函数调用的变量对象来解析一个自由符号，看看是否有匹配的变量（我在这里简化）。如果没有，则查看包含执行上下文的变量对象，然后查看外部的变量对象等等，直到它到达全局上下文。（这就是全局变量的工作方式;它们是闭包的自然结果。）这个变量对象链称为范围链。

所以在上面，有多个option个变量，每个变量都与同一个调用中定义的get回调有内在联系。因此，无论时间如何，回调都会看到正确的option变量。

Answer 2

你的函数可以接受元素的索引和元素本身：
jQuery.each( collection, callback(indexInArray, valueOfElement) )
见here
作为旁注 - 你正在循环调用服务器通常这不是好的做法，因为对服务器的调用非常昂贵考虑更改服务器函数以接受一组值，并使用循环创建该数组，然后在循环后只进行一次服务器调用。

迷失在jQuery .each（）

2 个答案: