Lost in jQuery .each()

Question

在下面的脚本中，我试图解析一个选择列表，并为每个选项调用一个php，该php根据选项的" value“属性返回一个值(psuedo true/false)。

但是，当我在$.get中计算返回值并根据each()中的当前选项执行脚本时，我不知道如何引用当前的option元素来修改它。

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

get成功回调内的this将不再引用该元素(每当有新函数时，函数内的this可能与函数外的this不同，而且很可能会不同；more here)。

你可以像这样解决它，使用你已经拥有的闭包：

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

或者，您可以使用ajax而不是get (get无论如何只是一个包装器)，并使用context参数告诉jQuery在调用回调时对this使用什么：

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

编辑：下面，@Hakre问，指的是上面的第一个例子：

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

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

当一个函数被调用时，JavaScript解释器会为这个特定的函数调用创建一个称为“执行上下文”的东西。那个执行上下文有一些我们称之为“变量对象”的东西，它保存了变量以及与这个函数的特定调用相关的东西(从技术上讲，它们被保存在执行上下文的变量上下文的深呼吸绑定对象上--我喜欢规范的说法)。

在该函数调用中创建的函数保持对创建它们的执行上下文的变量对象的引用；这就是闭包的工作方式。解释器通过查看此函数调用的变量对象来解析空闲符号，以查看是否有匹配的变量(我在这里简化)。如果没有，它将查找包含执行上下文的变量对象，然后查找外部的变量对象，依此类推，直到到达全局上下文。(这就是全局变量的工作方式；它们是闭包的自然结果。)这个可变对象链被称为作用域链。

因此，在上面的代码中，有多个option变量，每个变量本质上都与同一调用中定义的get回调绑定。因此，无论时间如何，回调都会看到正确的option变量。

Answer 2

您的函数可以接受元素的索引和元素本身：

jQuery.each( collection, callback(indexInArray, valueOfElement) )

请参阅here

顺便说一句--你在循环中调用服务器。

一般来说，这不是一个好的实践，因为对服务器的调用非常昂贵。

考虑更改您的服务器函数以接受一个值数组，并使用您的循环创建该数组，然后在循环之后只进行一次服务器调用。