jQuery 页面加载后发生的 .get 函数 (HAML)
jQuery .get Function Happening After page load (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 函数中 console.log(urlID) 时,它只会记录最后一个 url 3 次而不是 url1 url2 url3,我不太确定为什么?这意味着它替换同一个图像 src 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);
});
})();
所以我正在使用 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 个单独的图像 类。有谁知道为什么?
将其包装在 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);
});
})();