javascript - 基于HTML5数据元素的jQuery刷新div

Question

我的代码如下:

$('*[data-pickup]').change(function(){
    var value = $(this).val();
    console.log(value);
    $.ajax({
       type    : "POST",
       cache   : false,
       url     : "a.php?pickup",
       data    : {'X': value},
      success: function(data) {
        $("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO");
        }
      });

    $("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO 2");
    $("*[data-pick='" + $(this).attr("data-pickup") + "']").show();
})

通过 Firebug 查看时，AJAX 调用显示了一个响应，该响应没有在屏幕上刷新，因此我将其更改为简单的“Hello”响应，但这仍然不起作用。

如果我注释掉 .html("HELLO 2") 行，它会显示曾经隐藏的 div，其中包含 data-pick=1 的 HTML5 数据元素或data-pick=2等(取决于attr("data-pickup")是什么)，其中自动填充“Test”，因此显示“Test” ”。

如果我取消注释 .html("HELLO 2") 行，则显示的 div 会显示“HELLO 2”。但是，对于注释掉的 .html("HELLO 2") 行，它应该通过 AJAX 调用从“Test”更新为“Hello”，但事实并非如此。如果我将 data* 更改为简单的 HTML id 元素并将所有代码更新为 #"+ $(this).attr("data-pickup") + "，它的工作原理与数据属性(AJAX 调用不会更新任何内容)。

当我创建一个名为“el”的变量并使其等于*[data-pick='"+ $(this).attr("data-pickup") + "']，然后将其打印到控制台，它显示为:“[data-pick='1']”或“[data-pick='2']”等。然后如果我更新从 $("*[data-pick='"+ $(this).attr("data-pickup") + "']").whatever 到 $( 的所有代码el).whatever(认为某处可能存在错误)，它仍然像以前一样工作。

那么，我到底做错了什么？为什么 div 不会通过 AJAX 调用刷新，但在 AJAX 调用后会刷新？

Answer 1

问题在于ajax函数的成功处理程序中的“this”是ajax函数本身，而不是触发事件处理程序的元素。您需要做的是存储元素 var el = $(this) 的值，然后每当您想要利用闭包访问该元素时引用该值。

$('*[data-pickup]').change(function(){
        var value = $(this).val();
        var el = $(this);
        console.log(value);
        $.ajax({
           type    : "POST",
           cache   : false,
           url     : "a.php?pickup",
           data    : {'X': value},
          success: function(data) {
            $("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO");
            }
          });

        $("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO 2");
        $("*[data-pick='" + el.attr("data-pickup") + "']").show();
    })