功能的成功部分不起作用

Question

我有两个带有类型文本的输入,当用户开始编写我将数据发送到另一个名为"jsonpage.html"的页面时,我写了一个函数onkeyup.但我的代码的成功部分不起作用.我认为它无法找到div的地址.但在第一部分它可以找到它.我不知道为什么它在成功部分不起作用？如果省略部分"$(this).closest(".main").找到"从成功起作用.但是在我添加这些行之后它没有.

这是我的片段:

$('.country').each(function() {
$(this).on('keyup', function(e) {
        var element = $(this).val().length;
        if (e.which !== 0 &&
            !e.ctrlKey && !e.metaKey && !e.altKey
        ) {
            if (element > 2) {

                $(this).closest(".main").find(".mini-loading").css("display", "block")
                var val = $(this).val()
                val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase();
                $(this).val(val)
                $.ajax({
                    url: "jsonpage.html",
                    type: "get",
                    contentType: 'application/json; charset=utf-8',
                    data: {
                        key: $(this).val()
                    },
                    success: function(result) {
                        $(this).closest(".main").find(".mini-loading").css("display", "none")
                        $(this).closest(".main").find(".co").empty().html(result)
                    }
                })
            }
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main">
  <div class="city1">
    <input type="text" value="" class="country" placeholder="First City" />
    <input value="" type="hidden" />
    <div class="mini-loading" style="display: none; ">
      LOADING
    </div>
    <div class="co"></div>
  </div>
</div>


<div class="main">
  <div class="city2">
    <br/>
    <input type="text" value="" class="country" placeholder="Second City" />
    <input value="" type="hidden" />
    <div class="mini-loading" style="display: none; ">
      LOADING
    </div>
    <div class="co"></div>
  </div>
</div>

Answer 1

问题可能是由于this您的成功回调函数的范围不再指向您的输入而是指向ajax调用.

尝试存储您的价值,如下所示:

$(this).on('keyup', function(e) {
   // Store the initial value of this ---------------------------------
   var _this = this;

   var element = $(this).val().length;
    if (e.which !== 0 &&
        !e.ctrlKey && !e.metaKey && !e.altKey
    ) {
        if (element > 2) {

            $(this).closest(".main").find(".mini-loading").css("display", "block")
            var val = $(this).val()
            val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase();
            $(this).val(val)
            $.ajax({
                url: "jsonpage.html",
                type: "get",
                contentType: 'application/json; charset=utf-8',
                data: {
                    key: $(this).val()
                },
                success: function(result) {

                   // And use it here at least ----------------------
                    $(_this).closest(".main").find(".mini-loading").css("display", "none")
                    $(_this).closest(".main").find(".co").empty().html(result)
                }
            })
        }
    }
})

您也可以使用$(e.target)(事件目标元素)而不是this获取输入元素

最后,您还可以使用jquery context选项.请参见如何在jquery ajax成功回调函数中传递上下文