0

アルバムで並べ替えたい画像ギャラリーがあります。

私は次のような配列を持っています：

var images_gallery = [
    {
        image_src: "images/xmas-1.jpg",
        album: "xmas"
    },
    {
        image_src: "images/xmas-2.jpg",
        album: "xmas"
    },
    {
        image_src: "images/xmas-3.jpg",
        album: "xmas"
    },
    {
        image_src: "images/xmas-4.jpg",
         album: "summer"
    }
]

私はまた私のhtmlに選択があります：

   <select name="album">
        <option selected="selected" id="all">All</option>
        <option id="xmas">Xmas Party</option>
        <option id="summer">Summer Party</option>
    </select>

そしてこれは私のjsファイルにあります：

$("select[name='album']").change(function() {
    var thisAlbum = $(this).children(":selected").attr("id");
});

私の質問は、選択したオプションIDに一致するアルバムで配列をフィルタリングするにはどうすればよいですか（次に、（showImages）の関数があるそれらを表示します）。

編集：

ここで得られた以下の答えを使用して：

$("select[name='album']").change(function() {
    var thisAlbum = $(this).children(":selected").attr("id");

    var filteredArray = images_gallery.filter(function(x) {
        return x.album == thisAlbum;
    });

    $('#librarian-page-container-gallery').html(' ');

    Shadowbox.setup("a.gallery", {
        gallery:   "gallery",
    });

    filteredArray.showImages2();


});

私の関数を新しいフィルター処理された配列に適用する方法がわかりませんか？

私の関数は次のようになります：

function showImages2(){
$.each(images_gallery,function(i,image_gallery){
           // stuff in here
    });
}

これまでのご協力に感謝します！

4

3 に答える 3

1

次を使用して配列をフィルタリングできますfilter。

var filteredArray = images_array.filter(function(x) {
   return x.album == thisAlbum;
});

これは、古いブラウザーでサポートするための shimです。

于 2013-02-01T12:52:15.937 に答える
0

デビッドの答えを使用して結果をフィルタリングします。

$("select[name='album']").change(function() {
    var thisAlbum = $(this).children(":selected").attr("id");
    var result = images_gallery.filter(function(x) {
       return x.album == thisAlbum;
    });
    //Clear images
    $('#images').html(' ');
    //Show images in new result array
    for(img in result){
        $('#images').append('<img src="' + result[img].image_src + '" />');
    }
});

http://jsfiddle.net/vyaTC/1/

于 2013-02-01T12:57:11.857 に答える
0

jQueryを使用したい場合は、次を使用できます.grep。

var filterArray = $.grep(images_gallery, function(obj) {
    return obj.album === thisAlbum;
});

'all'が配列内のすべてのオブジェクトを取得する場合、thisAlbumに変更を加えました：http：//jsfiddle.net/4tEz4/

var filterArray = $.grep(images_gallery, function(obj) {
    return thisAlbum === 'all' || obj.album === thisAlbum;
});

あるいは単に：

var filterArray = thisAlbum === 'all' ? images_gallery : $.grep(images_gallery, function(obj) {
    return obj.album === thisAlbum;
});
于 2013-02-01T12:57:22.093 に答える