具有每个功能的网格 JQuery答案

【问题标题】：Grid JQuery with each function具有每个功能的网格 JQuery
【发布时间】：2015-07-20 03:18:08
【问题描述】：

我不知道该怎么做：用每个 jquery 滚动一个包含 9 个图像的数组并动态构建一个包含三列的网格。对于每个要单击的图像，这应该会随着淡入淡出效果消失

【问题讨论】：

【解决方案1】：

这是你的意思吗？

<style>
    #print{width: 141px;height: 141px;margin: auto;}
    #print div{width:35px;height:35px;margin: 5px;border: 1px solid #000;float:left;}
    #print div img{width:35px;height:35px;}
</style>
<script>
    var r = '';
    array = ['1','2','3','4','5','6','7','8','9'];
    for(var i = 0 ;i < 9; i++){
        r += '<div><img src="https://www.gravatar.com/avatar/b704656821750c1f0abf7832da997248?s=32&d=identicon&r=PG&f=1" /></div>'; 
        //when replace your images names at array replace src with this src="images/'+array[i]+'.jpg"
    }
    function fadeOutFunction(){
        img = $(this).children('img');
        img.fadeToggle();
    }
    $(document).ready(function(e) {
        $('#print').html(r);
        $('#print').delegate('div','click',fadeOutFunction);
    });
</script>
<div id="print"></div>

【讨论】：