基於數據屬性，最小值和最大值的隱藏項目

Question

我正在創建基本過濾器以從列表中刪除某些項目。只有12個項目，所以IMO不足以打擾延遲加載或渲染。只需使用jQuery來隱藏項目。

使用select下拉列表中的數字，minValue和maxValue中的一個篩選出項目。與div相關的值存儲在div上的data-bedrooms中。

HTML例如

<div class="property-item" data-bedrooms="7">7 bedrooms</div> 

我觸發我的下拉菜單中的一個.change我的邏輯。然後，我使用filter()返回與minValue和maxValue的條件相匹配（或不匹配）並將其淡入/淡出的項目。

下面是一個完整的代碼豬圈裏，你可以看到在行動的一切：http://codepen.io/anon/pen/ALdOLW

什麼我發現是，第一個選擇的工作（例如，選擇分4，你會刪除下面4一切），但嘗試選擇一個最大值，並開始行爲異常。

當您選擇第二個值時，它會返回所有以前的結果。我需要將兩個選擇都綁定在一起。

我哪裏錯了？

我需要的fadeIn和fadeOut結合起來，同時檢查maxValue和minValue

return $(this).attr('data-bedrooms') < minValue || > maxValue; 

，但我知道上面是不正確的語法

Answer 1

OP好像你的代碼普遍的工作，我的猜測是，你正在運行到一定的競爭條件，因爲你的代碼是動畫多次。我分叉你的codepen，並重新組織代碼，以便執行兩個操作，而不是4個。我還將你的過濾器函數提升爲一個單獨的函數。 IMO通過進行這些更改，可以提高代碼的可讀性和可維護性。

// Translating 'min' and 'max' to numbers that we can compare against 
// This makes it easier to perform the <= >= checks 
if (minValue === 'min-default') { 
    minValue = 0; 
} 
if (maxValue === 'max-default') { 
    maxValue = 1000; // This should probably find the highest value from the available options 
} 

// Moved this out to its own function that compares the entire range at once 
function filterBedroomsRange(index, item) { 
    var bedrooms = $(item).attr('data-bedrooms'); 

    // Validate against the selected range together to avoid double filter/double animation issues 
    // The number of bedrooms must be greater than or equal to the min value, and less than, or equal to the maxValue 
    return bedrooms >= minValue && <= maxValue; 
} 


// Hide items that don't match the range 
properties.find('.property-item').filter(function(index, item) { 
    // Return the negative of `filterBedroomsRange` to find items to hide 
    return !filterBedroomsRange(index, item); 
}).fadeOut('fast'); 


// Show items that do match the range 
properties.find('.property-item').filter(filterBedroomsRange).fadeIn('fast'); 

Codepen：http://codepen.io/anon/pen/VKdPNB

Answer 2

而不是做

if (minValue != 'min-default') { 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') < minValue; 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') >= minValue; 
    }).fadeIn('fast'); 
    } 
    if (maxValue != 'max-default') { 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') > maxValue; 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') <= maxValue; 
    }).fadeIn('fast'); 
    } 

你應該做

$(properties).find('.property-item').filter(function() { 
     return ((minValue != 'min-default') && $(this).attr('data-bedrooms') < minValue) || ((maxValue != 'max-default') && $(this).attr('data-bedrooms') > maxValue); 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return ((minValue != 'min-default') && $(this).attr('data-bedrooms') >= minValue) && ((maxValue != 'max-default') && $(this).attr('data-bedrooms') <= maxValue); 
    }).fadeIn('fast'); 

檢查http://codepen.io/anon/pen/dpKNAZ