Я пытаюсь создать веб-страницу с сетчатой структурой, в которой одни поля большие, а другие маленькие, без необходимости кодировать все в html.Я создал структуру div, как вы можете видеть здесь:
<div id="content-wrapper">
<div class="inline">
<div class="big-tile">
<img class="big-tile-image" />
<div class="big-tile-description">
<div class="name"></div>
<div class="rating"></div>
</div>
</div>
</div>
, и я хотел бы заполнить соответствующие блоки div из файла XML, используя Javascript.Это javascript у меня сейчас:
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "imgdb.xml", true);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var large = 340;
var tileName = new Array();
var tileRating = new Array();
var tilePhoto = new Array();
var tileSize = new Array();
for (i=0;i<=18;i++) {
tileSize[i] = xmlDoc.getElementsByTagName("girl")[i].childNodes[3];
tileName[i] = xmlDoc.getElementsByTagName("girl")[i].childNodes[0];
tileRating[i] = xmlDoc.getElementsByTagName("girl")[i].childNodes[2];
tilePhoto[i] = xmlDoc.getElementsByTagName("girl")[i].childNodes[1];
if (tileSize[i] == "large") {
document.getElementsByClassName("big-tile-image").setAttribute("src", tilePhoto[i]);
}
}
}
Я не пытался заполнить другие блоки, такие как рейтинг и имя.Я хотел посмотреть, работает ли код, отображая первое изображение.Очевидно, это не так, поэтому мой вопрос в том, что я делаю неправильно?
{Я пытаюсь создать что-то похожее на интернет-магазин Chrome, если смотреть в chrome}
Спасибо за любую помощьВы, ребята, можете дать!