jQuery 页面加载后发生的 .get 函数 (HAML)

Question

所以我正在使用 HAML 并循环访问一组 URL [url1, url2, url3] 以便从中提取图像它的页面并将其 src 放在另一个页面中。我的代码如下：

urls.each do |url|
   .img{:id => "url_#{url}"}
   :javascript
        var urlID = "#url_" + "#{url}";
        $.get('#{url}').then(function(res){
              var src = $(res).find('.image').attr('src');
              // console.log(urlID);
              $(`{urlID}`).attr('src', src);
            });

但是，这似乎不起作用，因为每当我在 $.get 函数中 console.log(urlID) 时，它只会记录最后一个 url 3 次而不是 url1 url2 url3，我不太确定为什么？这意味着它替换同一个图像 src 3 次，而不是在每个图像中显示 3 个单独的图像类。有谁知道为什么？

Answer 1

将其包装在 IIFE 中以创建闭包并防止在请求完成之前覆盖变量。

$.get() 是异步的，因此当您多次创建相同的变量时，您会覆盖之前的版本。当请求完成时，它将使用最后一个值

(function(){
    // only scoped in this IIFE closure and
    // not affected by other versions in your loop
    let urlID = "#url_" + "#{url}";
    $.get('#{url}').then(function(res){
          var src = $(res).find('.image').attr('src');
          // console.log(urlID);
          $(`{urlID}`).attr('src', src);
     });

})();

jQuery 页面加载后发生的 .get 函数 (HAML)

jQuery .get Function Happening After page load (HAML)

javascript

html

jquery

haml