同位素过滤器自动显示所有项目

Question

我需要在“页面加载”时使用jquery同位素过滤过滤网页中的一些项目。因为我在我的网页上调用下面的代码片段。

$(document).ready(function () {

   //function to generate all the items in the page
   generateAllHomes();

    $('#container').isotope(
        {
            filter: '.singleStory'
        }
    );

});

这只工作了几秒钟。一旦页面被加载。但在大约2秒后，它会自动显示所有的项目。有人能告诉我这里发生了什么吗？

我在代码的下面显示同位素项目

<section class="rooms mt50">
    <div class="container">
        <div class="row">
            <div class="row" id="homeDisplay">

            </div>
        </div>
    </div>
</section>

我使用下面的函数在$(Document).ready上动态生成同位素项目。

function displayHomes(objectList) {

    var node = document.getElementById('homeDisplay');

    while (node.hasChildNodes()) {
        node.removeChild(node.firstChild);
    }

    //document.getElementById("MyElement").className = "row room-list isotope";

    var finalList = '';

    for (var x = 0; x < objectList.length; x++) {

        var home = objectList[x];

        var elevationPhotoPath = 'https://s3-ap-southeast-2.amazonaws.com/elevationphotos/' + home.elevationphotoName;
        var homeAddress = home.address;
        var priceValue = home.price;
        var homePrice = numberWithCommas(priceValue);
        //var homePrice = priceValue;

        if (homePrice <= 0) {
            homePrice = '-';
        }

        var homeName = home.homeName;
        var bedRooms = home.numberOfBedrooms;
        var bathRooms = home.numberOfBathrooms;
        var garages = home.numberOfGarages;
        var area = home.livingArea;
        var floorPlanPhoto = home.floorplanName;
        var builderName = home.builderName;
        var homeState = home.state;
        var thaterAvailable = home.theaterAvailable;
        var alfrescoAvailable = home.alfrescoAvailable;
        var gamesAvailable = home.gamesAvailable;
        var studyAvailable = home.studyAvailable;
        var livingArea = home.livingArea;
        var frontage = home.frontage;
        var contactEmail = home.contactEmail;
        var contactName = home.contactName;
        var contactPhone = home.contactPhone;
        var longitude = home.longitude;
        var latitude = home.latitude;
        var homeDesign = home.design;

        var queryString = '?' + 'homeAddress=' + homeAddress + '&homePrice=' + homePrice + '&homeName=' + homeName + '&bedRooms=' + bedRooms + '&bathRooms=' + bathRooms + '&garages=' + garages + '&area=' + area +
            '&floorPlan=' + floorPlanPhoto + '&builder=' + builderName + '&stateName=' + homeState + '&thaterAvail=' + thaterAvailable + '&alfrescoAvail=' + alfrescoAvailable + '&gamesAvail=' + gamesAvailable +
            '&studyAvail=' + studyAvailable + '&frontage=' + frontage + '&livingArea=' + livingArea + '&contactEmail=' + contactEmail + '&contactName=' + contactName + '&contactPhone=' + contactPhone +
            '&longi=' + longitude + '&lati=' + latitude;


        var bedRoomFilterValue = bedRooms + 'b';
        if (bedRooms >= 7)
            bedRoomFilterValue = '7b';

        var filterString = getPriceBandIndex(priceValue) + ' ' + homeState + ' ' + bedRoomFilterValue + ' ' + frontage + 'f' + ' ' + homeDesign.split(' ').join('_') + ' ' + builderName.split(' ').join('_');

        var homeFrame = '<div class="col-sm-4 ' + filterString + '">'


        //homeFrame += '<div class="col-sm-4 single">';

        //homeFrame+='<div class="col-sm-4 single">';
        homeFrame += '<div class="room-thumb"> <img src="' + elevationPhotoPath + '" alt="room 1" class="img-responsive" />';
        homeFrame += '<div class="mask">';
        homeFrame += '<div class="main">';
        homeFrame += '<h5>' + homeName + '<div class="builder-name">' + builderName + '</div></h5>';

        if (homePrice == '-') {
            homeFrame += '<div class="price">' + homePrice + '<span>&nbsp;BASE</span></div>';
        } else {
            homeFrame += '<div class="price">$' + homePrice + '<span>&nbsp;BASE</span></div>';
        }

        homeFrame += '<div class="features">'+bedRooms +' bed <br/>'+ bathRooms +' bath</div>';
        homeFrame += '</div>';
        homeFrame += '<div class="content">';
        homeFrame += '<p><span>'+homeAddress+'</span></p>';
        homeFrame += '<div class="row" style="height:112px;">';
        homeFrame += '<div class="col-xs-6">';
        homeFrame += '<ul class="list-unstyled">';

        if (area == 0) {
        homeFrame += '<li><div class="icon-area"> <span class="icon_span">'+'-'+' m<sup>2</sup></span></div></li>';
        }else{
        homeFrame += '<li><div class="icon-area"> <span class="icon_span">'+area+' m<sup>2</sup></span></div></li>';
        }
        homeFrame += '<li><div class="icon-bed"> <span class="icon_span">'+bedRooms+'&nbsp;Bedrooms</span></div></li>';

        if (thaterAvailable == 'True') {
        homeFrame += '<li><i class="fa fa-check-circle"></i>&nbsp;&nbsp;Theater</li>';
        }

        if (alfrescoAvailable == 'True') {
        homeFrame += '<li><i class="fa fa-check-circle"></i>&nbsp;&nbsp;Alfresco</li>';
        }


        homeFrame +='</ul>';
        homeFrame +='</div>';

        homeFrame +='<div class="col-xs-6">';
        homeFrame +='<ul class="list-unstyled">';
        homeFrame +='<li><div class="icon-bath"> <span class="icon_span">'+bathRooms+'&nbsp;Bathrooms</span></div></li>';
        homeFrame +='<li><div class="icon-garage"> <span class="icon_span">'+garages+'&nbsp;Garages</span></div></li>';

        if (gamesAvailable == 'True') {
            homeFrame += '<li><i class="fa fa-check-circle"></i>&nbsp;&nbsp;Games</li>';
        }
        if (studyAvailable == 'True') {
            homeFrame += '<li><i class="fa fa-check-circle"></i>&nbsp;&nbsp;Study</li>';
        }

        homeFrame +='</ul>';
        homeFrame +='</div>';

        homeFrame +='</div>';
        homeFrame += '<a href="displayhome-detail.php' + queryString + '" class="btn btn-primary btn-block">More Details</a> </div>';

        homeFrame +='</div>';
        homeFrame +='</div>';
        homeFrame +='</div>';
        homeFrame +='</div>';

        finalList += homeFrame;
    }

    document.getElementById('homeDisplay').innerHTML += finalList;

}

下面是我使用的同位素过滤函数

$(函数() {

var $container = $('#homeDisplay'),
    filters = {};

$container.isotope({
    itemSelector: '.col-sm-4'
});

// filter buttons
$('select').change(function () {
    var $this = $(this);

    //alert('JS called');
    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $this.attr('data-filter-group');

    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    console.log($this.find(':selected'));
    // convert object into array
    var isoFilters = [];
    for (var prop in filters) {
        //alert(filters[ prop ]);
        isoFilters.push(filters[ prop ])
    }
    console.log(filters);
    var selector = isoFilters.join('');
    $container.isotope({ filter: selector });
    return false;
});

})；

Answer 1

问题是我应用过滤器的事件。我在document.ready()上应用了过滤器，但是当页面的其余内容被加载，其余的脚本被执行时，这个过滤器就会被覆盖。因此，我应用了如下所示的过滤器。

 //below event listener is included in document.ready()

     window.addEventListener("load", filterData, false);

/function来过滤数据，此函数从上一页获取参数，并触发筛选器下拉更改事件/

    function filterData() {

//take the parameters from previous page
        var price = <?php echo $priceValue; ?>;
        var state = <?php echo $stateValue; ?>;
        var beds = <?php echo $bedsValue; ?>;
        var frontage = <?php echo $frontageValue; ?>;
        var design = <?php echo $designValue; ?>;

//trigger the change events of filter dropdowns
        $('#select-price').val(price).trigger('change');
        $('#select-state').val(state).trigger('change');
        $('#select-beds').val(beds).trigger('change');
        $('#select-frontage').val(frontage).trigger('change');
        $('#select-design').val(design).trigger('change');
    }