javascript - 配列情報を各 div に分ける

Question

さまざまな div に配置する情報の配列があります。div の構築は問題ありませんが、すべての情報が最初の div に読み込まれます。

各配列アイテムをそれぞれの div に配置するにはどうすればよいですか?

以下の私の JavaScript コードを参照してください。

$(document).ready(function() {

var works = {

  facebook : {
    image : 'facebook.png',
    description : 'Description One.',
    website : 'http://www.facebook.com'
  },// End facebook
  google : {
    image : 'google.png',
    description : 'Description Two.',
    website : 'http://www.google.com'
  },// End google
  adobe : {
    image : 'adobe.png',
    description : 'Description Three.',
    website : 'http://www.adobe.com'
  }// End adobe

};// End var works

for ( var i in works ){

// Construct the tree of div
$('<div/>', {
    'id' : 'workId' + i,
    'class' : 'work'
}).appendTo("#workListId");

$('<div/>', {
    'id' : 'workFlipId' + i,
    'class' : 'workFlip'
}).appendTo("#workId" + i);

$('<div/>', {
    'id' : 'workDataId' + i,
    'class' : 'workData'
}).appendTo("#workId" + i);

$('<div/>', {
    'id' : 'workDescriptionId' + i,
    'class' : 'workDescription'
}).appendTo("#workDataId" + i);

$('<div/>', {
    'id' : 'workURLId' + i,
    'class' : 'workURL'
}).appendTo("#workDataId" + i);

// Insert the content in each div
var pathBegin = '<img src="img/works/';
var pathEnd = '"/>';

$("#workFlipId" + i).html(pathBegin + works[i].image + pathEnd);
$("#workDescriptionId" + i).html('<p>' + works[i].description + '</p>');
$("#workURLId" + i).html('<a href="' + works[i].website + '">Read more...</a>');

}//End for

$(".work").bind("click",function(){

    var $this = $(this);

    if($this.data('flipped'))
    {
        $this.revertFlip();
        $this.data('flipped',false)
    }// End if

    else
    {
        $this.flip({
            direction:'lr',
            color: '#454545',
            speed: 200,
            //content: $('.workData').html(),

            onBefore: function(){

                $this.html($this.siblings('.workData').html());
            }

        });// End $this.flip

        $this.data('flipped',true);

    }// End else
});//End function

}); // End Function

score 1 · Accepted Answer

コメントで言ったように、代わりにオブジェクトを使用します。これにより、ここでの作業がはるかに簡単になります。このようなスパゲッティコードを読んで、何を達成しようとしているのかを本当に理解するのはかなり難しいため、これはほとんど解決策ではなく、別の IMO のより良いアプローチの提案です。まず、works配列は次のように表すことができます。

var works = {
    facebook : {
        image : 'facebook.png',
        description : 'The biggest social network in the world.',
        website : 'http://www.facebook.com'
    }
    ...
};

次に、次のように html を生成します。

for (var work in works) {

    var img = '<img src="img/works' + works[work].image + '"/>',
        description = '<p>' + works[work].description + '</p>',
        website = '<a href="' + works[work].website + '">Link</a>';

    ...

}

また、あなたは jQuery を使用しているので、私はそれをフルに使用します。たとえば、次のようにします。

var work = document.createElement('div');
work.id = 'workId';
work.className = 'work';
...
document.getElementById("workListId").appendChild(work);

これらはすべて jQuery で次のように記述できます。

$('div', {
    'id' : 'workdId',
    'class' : 'work'
}).appendTo("#workListId");

score 0 · Accepted Answer

これ（JSFiddle）はどうですか？

var $works = new Array();
$works[0] = new Array('facebook.png', 'The biggest social network in the world.', 'http://www.facebook.com/');
$works[1] = new Array('adobe.png', 'The leading software developer targeted at web designers and developers.', 'http://www.adobe.com/');
$works[2] = new Array('microsoft.png', 'One of the top software companies of the world.', 'http://www.microsoft.com/');
$works[3] = new Array('sony.png', 'A global multibillion electronics and entertainment company ', 'http://www.sony.com/');
$works[4] = new Array('dell.png', 'One of the biggest computer developers and assemblers.', 'http://www.dell.com/');
$works[5] = new Array('ebay.png', 'The biggest online auction and shopping websites.', 'http://www.ebay.com/');
$works[6] = new Array('digg.png', 'One of the most popular web 2.0 social networks.', 'http://www.digg.com/');
$works[7] = new Array('google.png', 'The company that redefined web search.', 'http://www.google.com/');

var $more = "Read more";

//Random works
var shuffle = false;

$works.sort(function() {
    if (shuffle == true) {
        return 0.7 - Math.random();
    } else {
        return false;
    }
});
//End random works

function loadWorks()
{
    for (var $loop = 0; $loop < $works.length; $loop++) {
        var $work = $("<div>");
        $work.attr("id", "work"+$loop).attr("class", "work");
        var $workFlip = $("<div>");
        $workFlip.attr("id", "workFlip"+$loop).attr("class", "workFlip");
        $workFlip.html('<img src="img/works/'+$works[$loop][0]+'" >');
        var $workData = $("<div>");
        $workData.attr("id", "workData"+$loop).attr("class", "workData");
        var $workDescription = $("<div>");
        $workDescription.attr("id", "workDescription"+$loop).attr("class", "workDescription");
        $workDescription.html($works[$loop][1]);
        var $workURL = $("<div>");
        $workURL.attr("id", "workURL"+$loop).attr("class", "workURL");
        $workURL.html('<a href="'+$works[$loop][2]+'">'+$more+'</a>');
        $workData.append($workDescription).append($workURL);
        $work.append($workFlip).append($workData);
        $("body").append($work);        
    }
}

$(document).ready(function() {
    loadWorks();
});

score 0 · Accepted Answer

配列要素ごとに同じ id の div を作成しています。IDに番号を追加すると、機能するはずです。jsFiddle のコードの修正版は次のとおりです: http://jsfiddle.net/u5GcE/4/

javascript - 配列情報を各 div に分ける

3 に答える 3

Related

Reference