Question

我网站上有一个灯具列表的部分。当我点击它时，它会在模态窗口中加载夹具信息 - 每个俱乐部可能有一个图像，所以我想检查是否有图像，如果有，则显示它否则显示一般图像。代码如下：

$('#fixModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal

  var hclub = button.data('hclubid')


  imgpath = "/images/clubcrests/"
  homecrest = imgpath + hclub + '.jpg'
  gencrest = imgpath + 'generic.jpg'


$.get(homecrest)
    .done(function() { 
        homecrestsrc = "<img src='" + homecrest + "'>"

    }).fail(function() { 
       homecrestsrc = "<img src='" + gencrest + "'>"
    })

  var modal = $(this)


  modal.find('.fixmodhomec').html(homecrestsrc)


})

但是我第一次点击它时会收到错误：

homecrestsrc未定义

$.get似乎在modal.find之后运行。

如果我再次点击它会显示但始终显示上一次点击按钮时应该有的图像。如何确保$.get位先运行？

Answer 1

$.get 异步 - 你读过documentation了吗？ <{1}}来自AJAX来电的回复已经很久了。{/ 1}。

您需要在回调中移动逻辑。

modal.find

Answer 2

这是js / ajax令人困惑的部分。此代码不等待ajax reaponse，而是跳转到下一个命令。这意味着它将继续使用最后两行代码，然后响应将通过，然后它将首次设置homecrestsrc。无论你想要做什么，你得到了一个reaponse，你完成并失败。因此，将最后或最后两行代码放在完成和失败函数中。

Sry从手机打字，所以我无法解释太多，但希望你理解，这需要时间才能得到它bcs这一点在你开始时并不那么明显

Answer 3

另一种答案类型涵盖了这一点......基本上，如果get请求下面的代码取决于该结果，则需要在.done（）块内。

但是，我还要指出，显示图像取决于获取请求是否失败是不好的做法。如果该图像存在，您应该让您的api路由返回true，否则返回false。然后，您可以在.success（）块中过滤正确的图片。

.fail（）应保留仅用于调试。

检查文件是否存在并显示它 - 代码顺序

3 个答案: