0

フォルダに保存した画像 (*.jpg) を表示したい。関数を使用してこれらの画像を表示したい。これを行うために、オブジェクトで構成される配列を作成しました。各オブジェクトには、関数で使用している ID が含まれています。コードは次のとおりです。 

//employee array
var employees =[{
    name:"jacob",
    age :23,
    city:"Boston",
    yoe :12,
    image :'d.jpg',
    id : 1
    },
    {
    name:"aaron",
    age :21,
    city:"Nevada",
    yoe :12,
    image :'b.jpg',
    id : 2
    },
    ...   
}];

画像の名前である従業員を使用しidて画像を表示しています。以下は、画像の関数です。

function getimages(){
    for(var i = 1;i <= employees.length;i++){
        document.getElementById("list + i").innerHTML = employees[i].id+".jpg";
    }
}
getimages(); // to get the images

これは、これらの画像を表示したい HTML 部分です。

<ul>
    <li id="list1">A</li>
    <li id="list2">B</li>
    <li id="list3">C</li>
    <p>123213</p>
</ul>
4

3 に答える 3

2

に置き換える必要がありdocument.getElementById("list + i")ますdocument.getElementById("list" + i)。

次に、DOM 要素を動的に作成して追加する価値がある場合があります。これらの新しい要素をいつ更新する必要があるか分からないからです。次のようなものがあるかもしれません：

function getimages(){
        for(var i = 1;i <= employees.length;i++) {
             var elem=document.getElementById("list"+i);
             var imagePath=employees[i].id+".jpg";

             // append text
             elem.appendChild( document.createTextNode(imagePath) );

             // append image
             var img = document.createElement("img");
             img.src = imagePath;
             elem.appendChild(img);
        }
}
于 2013-04-25T07:45:23.383 に答える
0

従業員数が変動する場合は、リスト要素の数を可変にすることができます。これを行うには、空の順序付けられていないリストを作成して<ul id="employees"></ul>から、getImages 関数を変更します。

function getImages(){ 
    for(var i = 1, img, li; i <= employees.length; i++) { 

        // create image and set image source
        img = document.createElement("img"); img.src = employee[i].image; 

        // create list item, set ID and attach previously created image
        li = document.createElement("li"); li.id = "list"+i; li.appendChild(img); 

        // attach list item to unordered list of employees
        document.getElementById("employees").appendChild(li);
    }
}

これで、好きなだけ従業員を持つことができ、全員が独自のリスト ID を持つようになります。また、for ループ内の変数宣言を変更して、反復ごとに再宣言するのではなく、変数を再利用できるようにしました。

于 2013-04-25T08:36:10.680 に答える