創建通過css傳遞多個選擇器的過濾器

問題：Javascript代碼和過濾不起作用。什麼是不正確的我的Javascript？創建通過css傳遞多個選擇器的過濾器

我正在實施基於同位素jQuery插件（http://isotope.metafizzy.co/index.html）對購物車產品進行排序的用戶體驗過濾&。該系統正在Shopify平臺上實施（演示鏈接：http://cushionbrilliant.myshopify.com）。

在此鏈接（http://isotope.metafizzy.co/demos/combination-filters.html）中，Isotope的開發者解釋瞭如何通過傳遞組合的選擇器來組合多個過濾器。做一些研究，我發現代碼來實現這一點，但它不能正常工作。

這裏是的jsfiddle鏈接到一個示例代碼：http://jsfiddle.net/jeremyccrane/pJ6W8/22/

這裏是JavaScript代碼，我一直在試圖功能：

var $container = $('#container'); 
    // initialize isotope 
    $container.isotope({ 
     // options... 
     animationOptions: { duration: 300, easing: 'linear', queue: false }, 
     getSortData : { 
     price : function ($elem) { return parseFloat($elem.find('.price').text()); } 
     size : function ($elem) { return parseFloat($elem.find('.size').text()); } 
     } 
    }); 

// sorting button 
$('a.pricelow').click(function(){ 
    $('#container').isotope({ sortBy : 'price' }); 
    return false; 
}); 
$('a.pricehigh').click(function(){ 
    $('#container').isotope({ sortBy : 'price',sortAscending : false }); 
    return false; 
}); 
$('a.sizelow').click(function(){ 
    $('#container').isotope({ sortBy : 'size' }); 
    return false; 
}); 
$('a.sizehigh').click(function(){ 
    $('#container').isotope({ sortBy : 'size',sortAscending : false }); 
    return false; 
}); 

// filter buttons 
    $('.filters a').click(function(){ 
     //$(this).addClass('.selected'); 
     var $this = $(this); 
     // don't proceed if already selected 
     if ($this.hasClass('selected')) { 
     return; 
     } 

     var $optionSet = $this.parents('.option-set'); 
     // change selected class 
     $optionSet.find('.selected').removeClass('selected'); 
     $this.addClass('selected'); 

     // store filter value in object 
     // i.e. filters.color = 'red' 
     var group = $optionSet.attr('data-filter-group'); 
     filters[ group ] = $this.attr('data-filter-value'); 
     // convert object into array 
     var isoFilters = []; 
     for (var prop in filters) { 
     isoFilters.push(filters[ prop ]) 
     } 
     var selector = isoFilters.join(''); 
     $container.isotope({ filter: selector }); 

     return false; 
    });

下面是選擇的HTML代碼：

<ul id="filters"> 
    <li><a href="#">Type</a> 
     <ul data-filter-group="diamond" class="filters option-set"> 
     <li><a href="#" data-filter="*">Show All</a></li> 
     <li><a href="#" data-filter=".One">One</a></li> 
     <li><a href="#" data-filter=".Two">Two</a></li> 
     <li><a href="#" data-filter=".Three">Three</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Price</a> 
     <ul data-filter-group="price" class="filters option-set"> 
     <li><a href="#" data-filter="*">Show All</a></li> 
     <li><a href="#" data-filter=".Under5k">Under $5k</a></li> 
     <li><a href="#" data-filter=".Under10k">Under $10k</a></li> 
     <li><a href="#" data-filter=".Over10k">Over $10k</a></li> 
    </ul> 
    </li> 
</ul> 
<ul id="sorting"> 
    <li><a href="#pricelow" class="pricelow">Price Low to High</a></li> 
    <li><a href="#pricehigh" class="pricehigh">Price High to Low</a></li> 
    <li><a href="#sizelow" class="sizelow">Size Low to High</a></li> 
    <li><a href="#sizehigh" class="sizehigh">Size High to Low</a></li> 
</ul>

以下是樣本框的HTML代碼：

<div id="container"> 
    <div class="box One Under5k">Box Category 1 <div class="price">2500</div><div class="size">1.5</div></div> 
    <div class="box Two Under5k">Box Category 2 <div class="price">2500</div><div class="size">2.0</div></div> 
    <div class="box Three Under5k">Box Category 3 <div class="price">2500</div><div class="size">2.5</div></div> 
    <div class="box One Under10k">Box Category 1 <div class="price">7500</div><div class="size">3.0</div></div> 
    <div class="box Two Under10k">Box Category 2 <div class="price">7500</div><div class="size">3.5</div></div> 
    <div class="box Three Under10k">Box Category 3 <div class="price">7500</div><div class="size">4.0</div></div> 
    <div class="box One Over10k">Box Category 1 <div class="price">12500</div><div class="size">4.5</div></div> 
    <div class="box Two Over10k">Box Category 2 <div class="price">12500</div><div class="size">5.0</div></div> 
    <div class="box Three Over10k">Box Category 3 <div class="price">12500</div><div class="size">5.5</div></div> 
</div>

感謝您的幫助！

來源

2013-01-15 Jeremy Crane

@ 3dgoo很好。只是在問題頂部更新了問題。 –

對我來說聽起來像是一個「沃爾多的問題在哪裏......什麼是不工作？ –

@RenePot這是一個我試圖正確集成的插件。工程師回答了下面的問題。 –

見http://jsfiddle.net/desandro/pJ6W8/31/

有內getSortData缺少逗號。
你的JS失蹤var filters = {}。如果沒有這種說法，您可以使用瀏覽器提供的全球filters變量作爲#filters元素。
改變filters[ group ] = $this.attr('data-filter-value');到過濾器[組] = $ this.attr（ '數據過濾器'）;`來匹配您的HTML
新增,sortAscending : true它被需要的那種click事件。

來源

2013-01-16 13:23:33 desandro

太棒了。謝謝您的幫助。我是新來的JavaScript，所以搞清楚了。將向您發送與完成網站的鏈接。 –

意想不到的輸入！我想在此討論的另一個補充是記住點擊事件event.preventDefault;。否則，當用戶單擊已激活的過濾器值時，您將重新加載頁面。

$('.filters a').click(function(){ 
    event.preventDefault(); 
    //$(this).addClass('.selected'); 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
    return; 
    }

來源

2013-08-21 07:09:31 user2702508

創建通過css傳遞多個選擇器的過濾器

回答

相關問題