页面加载后发生的jQuery.get函数(HAML)-前端问题

jQuery .get Function Happening After page load (HAML)(页面加载后发生的jQuery.get函数(HAML))

本文介绍了页面加载后发生的jQuery.get函数(HAML)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我使用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函数中使用sole.log(UrlID)时，它只会记录最后一个url 3次，而不是url1 url2 url3，我真的不确定为什么？这意味着它替换相同的图像源3次，而不是在每个图像类中显示3个单独的图像。有人知道为什么吗？

推荐答案

将其包装在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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！