功能的成功部分不起作用答案

【问题标题】：Success part of a function does not work功能的成功部分不起作用
【发布时间】：2018-07-16 15:04:24
【问题描述】：

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

这是我的 sn-p：

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

【问题讨论】：

如果 result 是 json 格式。您可能希望在.html() 之前对其进行格式化
json 页面 .html?
@Eddie 如果我写 $(".mini-loading").css("display", "none") $(".co").empty().html(result) 在成功我的代码对他们俩都很好。但我想分别为每个部分运行代码

标签： javascript jquery ajax

【解决方案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 上下文选项。见How to pass context in jquery ajax success callback function

【讨论】：