我有一个循环调用一个加载图像的函数。它无法正常工作。图像全部加载，但它们都被附加到最后一个div。
对于这个例子，我的页面上有三个div：
<div id="opening_0"></div>
<div id="opening_1"></div>
<div id="opening_2"></div>
使用Javascript：
$.ajax(
{
type: "GET",
url: xml_source, //call this url - SEE XML BELOW
dataType: 'xml',
async: false,
success: function(xml) //if we have data...
{
openings = $(xml).find("opening"); //Find the openings in the xml
mattes_create_openings(openings);
}
});
function mattes_create_openings(openings)
{
$(openings).each(function(i, el) //loop through the openings xml
{
//more code...
var photos_selected_fid = $(el).find("imgsrc").text();
clipX = 0;
clipY = 0;
photos_create_preview_image(document.getElementById("opening_" + i), clipX, clipY, photos_selected_fid);
});
}
function photos_create_preview_image(element, clipX, clipY, photos_selected_fid)
{
photos_selected_opening = element.id; //Sets the selected opening to the div that calls this function
photos_selected_opening_value = photos_selected_opening.replace("opening_", "");
var new_img = new Image();
new_img.onload = function()
{
$(element).empty(); //Empty the div
element.appendChild(new_img); //Append the image to the div
}
new_img.src = SITE_URL + "/system/photo/cf_preview/" + photos_selected_fid; //Set the source of the image
}
加载的XML：
<?xml version="1.0"?>
<Order>
<size width="20" height="10">
<width>20</width>
<height>10</height>
</size>
<type>photo</type>
<overlay/>
<Mats selected_type="17" selected_design="81">
<mat layer_name="top">
<item size="0">
<imgsrc>11852997eab43ff5c7b1803692bee608</imgsrc>
<size>0</size>
<cpu/>
<cid>4208</cid>
<id/>
</item>
<fillet index="0">
<imgsrc>5ade25e607b6302691c318a94792e6eb</imgsrc>
<width>0.31</width>
<cid>9349</cid>
<sku>TD00060GL1</sku>
</fillet>
</mat>
</Mats>
<Openings>
<opening>
<item>
<x>7.75</x>
<y>1.75</y>
<width>4.5</width>
<height>6.5</height>
<type>rectangle</type>
<clipX>0</clipX>
<clipY>0</clipY>
<imgsrc>a0d3b6664b2fef68c279c5f58e6af5d6</imgsrc>
<photos_hires_width>1024</photos_hires_width>
<photos_hires_height>768</photos_hires_height>
</item>
</opening>
<opening>
<item>
<x>14</x>
<y>2.25</y>
<width>3.5</width>
<height>5.5</height>
<type>rectangle</type>
<clipX>0</clipX>
<clipY>0</clipY>
<imgsrc>148d39e78620ed03dc6bf0fee199ec97</imgsrc>
<photos_hires_width>1024</photos_hires_width>
<photos_hires_height>768</photos_hires_height>
</item>
</opening>
<opening>
<item>
<x>2.5</x>
<y>2.25</y>
<width>3.5</width>
<height>5.5</height>
<type>rectangle</type>
<clipX>0</clipX>
<clipY>0</clipY>
<imgsrc>971e9044a3f1fca2291d62d64470a1bd</imgsrc>
<photos_hires_width>1024</photos_hires_width>
<photos_hires_height>768</photos_hires_height>
</item>
</opening>
</Openings>
<Moulding>
<imgsrc>5f52a13c425655fa62058418542b95ca</imgsrc>
<width>1.13</width>
<cid>174</cid>
<sku>TD01600B0</sku>
<cpu>0.00</cpu>
</Moulding>
<Glass>
<cid>GAPC</cid>
</Glass>
</Order>
我有一个jsfiddle：http://jsfiddle.net/allisonc/am83wp4m/1/ 当我运行jsfiddle时，它尝试将源设置为所有这些组合（例如：SITE_URL +“/ system / photo / cf_preview /”+ imgsrc1 + imgsrc2 + imgsrc3）
答案 0 :(得分：0)
请参阅：http://jsfiddle.net/allisonc/am83wp4m/2/
var openings = document.createElement("Openings");
var opening1 = document.createElement("opening");
var imgsrc1 = document.createElement("imgsrc");
imgsrc1.appendChild(document.createTextNode("a0d3b6664b2fef68c279c5f58e6af5d6"));
opening1.appendChild(imgsrc1);
openings.appendChild(opening1);
var opening2 = document.createElement("opening");
var imgsrc2 = document.createElement("imgsrc");
imgsrc2.appendChild(document.createTextNode("148d39e78620ed03dc6bf0fee199ec97"));
opening2.appendChild(imgsrc2);
openings.appendChild(opening2);
var opening3 = document.createElement("opening");
var imgsrc3 = document.createElement("imgsrc");
imgsrc3.appendChild(document.createTextNode("971e9044a3f1fca2291d62d64470a1bd"));
opening3.appendChild(imgsrc3);
openings.appendChild(opening3);
var new_openings = $(openings).find("opening");
mattes_create_openings(new_openings);
function mattes_create_openings(openings)
{
$(openings).each(function(i, el) //loop through the openings xml
{
console.log(el);
console.log(i);
//more code...
var photos_selected_fid = $(el).find("imgsrc").text();
console.log(photos_selected_fid);
clipX = 0;
clipY = 0;
//photos_create_preview_image(document.getElementById("opening_" + i), clipX, clipY, photos_selected_fid);
photos_create_preview_image(document.getElementById("opening_" + i), clipX, clipY, photos_selected_fid);
});
}
function photos_create_preview_image(element, clipX, clipY, photos_selected_fid)
{
var photos_selected_opening = element.id; //Sets the selected opening to the div that calls this function
var photos_selected_opening_value = photos_selected_opening.replace("opening_", "");
var new_img = new Image();
new_img.onload = function()
{
$(element).empty(); //Empty the div
element.appendChild(new_img); //Append the image to the div
}
new_img.src = "http://example.com" + "/system/photo/cf_preview/" + photos_selected_fid; //Set the source of the image
}
答案 1 :(得分：0)
可能是这样的
var yourxml = '<your xml data>';
$($.parseXML(yourxml)).find('opening').each(function (index, opening) {
$('#opening_'+index).html('<img src= "http://example.com/system/photo/cf_preview/"' + $(opening).find('imgsrc').text() + ' />');
});
答案 2 :(得分：-1)
你的代码是正确的，除了一件事：我粘贴了以下的plunker，调整为拥有有效的图像和单独的div背景，并在你的迭代中看到了一个问题。实际上，jQuery的.each()从索引0开始迭代，这意味着您应该使用i + 1或从opening_#创建0个容器
http://plnkr.co/edit/8zrEfRfq1dtAeX5voUfK?p=preview
参见Plunker：
photos_create_preview_image(document.getElementById("opening_" + (i+1)), clipX, clipY);
请注意，我将opening_#与背景颜色分开：
<div id="opening_1" style="background:red"></div>
<div id="opening_2" style="background:green"></div>
<div id="opening_3" style="background:blue"></div>
<!-- Include your script AFTER your image containers -->
<script src="script.js"></script>
确保您的js脚本包含 您的DOM元素后（位于HTML body的末尾）