同位素過濾器自動顯示所有項目

我需要使用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>

下方位置的同位素項目和我使用下面的函數在$（文件）。就緒動態生成的同位素項目..

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; 
});

}）;

來源

2014-10-10 Asanga Dewaguru

您需要發佈更多的代碼。你的頁面和同位素的結構可能是什麼？ – Macsupport 2014-10-10 04:48:36

我剛剛在這裏添加了我使用的代碼。請注意，同位素項目正在通過電子方式生成 – 2014-10-13 06:22:00

問題在於我應用過濾器的事件。我在document.ready（）上應用過濾器，但是當頁面的其餘內容被加載並且其餘腳本得到執行時，此過濾器將被覆蓋。因此我已經應用瞭如下所示的過濾器。

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

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

/功能來過濾數據這個函數從上一個頁面的參數和觸發過濾器下拉菜單更改事件/

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'); 
    }

來源

2014-10-14 13:49:14

同位素過濾器自動顯示所有項目

回答

相關問題