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选项。见How to pass context in jquery ajax success callback function

功能的成功部分不起作用

1 个答案: