Question

我有一个静态页面，其中包含一组用于数据过滤的固定图像。有效的代码是：

  <div class="gallerySelector">
            <ul class="gallerySelectorList">
                <li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
                <li><a data-filter="article.portfolio[data-category~='illustration']" href="#">Events</a></li>
                <li><a data-filter="article.portfolio[data-category~='photography']" href="#">Entertainment</a></li>
                <li><a data-filter="article.portfolio[data-category~='branding']" href="#">Weddings</a></li>
                <li><a data-filter="article.portfolio[data-category~='video']" href="#">Video</a></li>
            </ul>
        </div>
<article class="portfolio" data-category="photography">
                <section class="thumbImage">
                    <img src="images/gallery/gallery-02-thumb.jpg" alt="" class="fullwidth">
                    <div class="thumbTextWrap">
                        <div class="thumbText">

                            <a class="thumbLink" href="images/gallery/gallery-02.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."><i class="icon-search"></i></a>
                        </div>
                    </div>
                </section>
            </article>
            <article class="portfolio" data-category="video">
                <section class="thumbImage">
                    <img src="images/gallery/gallery-03-thumb.jpg" alt="" class="fullwidth">
                    <div class="thumbTextWrap">
                        <div class="thumbText">
                            <h3 class="sectionTitle">Gallery Item</h3>
                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                            <a class="thumbLink" href="http://vimeo.com/24169968" rel="prettyPhoto" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."><i class="icon-search"></i></a>
                        </div>
                    </div>
                </section>
            </article>

现在我想从文件夹动态加载图片。所以我写了一个PHP和ajax代码，并正确地得到了所有正确的文件名。但我不明白如何在数据过滤器中添加这些结果。这是我目前的代码。

<div class="gallerySelector">
            <ul class="gallerySelectorList">
                <li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
                <li><a data-filter="article.portfolio[data-category~='illustration']" href="#">Events</a></li>
                <li><a data-filter="article.portfolio[data-category~='photography']" href="#">Entertainment</a></li>
                <li><a data-filter="article.portfolio[data-category~='branding']" href="#">Weddings</a></li>
                <li><a data-filter="article.portfolio[data-category~='video']" href="#">Video</a></li>
            </ul>
        </div>
        <section class="portfolio_container">
            <script type = "text/javascript">
                $.ajax({
                type: 'POST',
                url: 'getThumbs.php',
                data: {'folderName' : 'images/gallery/events/thumbs/'},
                success: function(msg){
                    var result = JSON.parse(msg);
                    var data_html = "";
                    for(var i in result) {
                        var $newItems = '<section class="thumbImage"><img src="'+result[i]+'" alt="" class="fullwidth"></section>';
                        $("#article.portfolio[data-category~='illustration']").append($newItems).isotope('insert', $newItems);

                    }
                }
            });
            </script>
        </section>

如何使数据过滤器动态化？

Answer 1

        <script type = "text/javascript">
            $.ajax({
            type: 'POST',
            url: 'getThumbs.php',
            success: function(msg){
               $('.gallerySelectorList').html(msg).show();
                }
            }
        });
        </script>

Answer 2

完成使用：

var $newElement = $(subHtml);
$('.portfolio_container').isotope('insert', $newElement);

参考：http://isotope.metafizzy.co/v1/docs/adding-items.html

在数据过滤器容器中动态加载文章

2 个答案: