データ属性、最小値、最大値に基づいて項目を非表示にする

Question

リストから項目を削除するための基本フィルタを作成しています。 IMOでは12項目しかないので、遅延読み込みやレンダリングに煩わ​​されることはありません。 jQueryを使って項目を隠すだけです。

項目は、selectドロップダウンリストの数字を使用して除外されます.1つはminValue、もう1つはmaxValueです。各divに関連する値は、divのdata-bedroomsに格納されます。

HTMLの例

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

私は私のドロップダウンの1の.changeに私のロジックをトリガーしています。その後、filter()を使用して、minValueとmaxValueの条件に一致する（または一致しない）項目を返し、フェードイン/アウトします。ここで

は、アクションのすべてを見ることができる完全なコードペンです： http://codepen.io/anon/pen/ALdOLW

私は何を見つけるの午前は、最初の選択が機能することである（例えば、選択分4、あなたは4以下のすべてを削除します）だけにしてみてください最大値を選択すると物事が不正に始まります。

2番目の値を選択すると、前のすべての結果が戻されます。私は両方の選択肢を結合する必要があります。

どこが間違っていますか？

は、私は両方maxValueとminValue

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

をチェックするfadeInとfadeOutを結合する必要がありますが、私は上記の間違った構文

Answer 1

OP。私はあなたのコードをフォークし、コードを再編成して、4の代わりに2つの操作を実行しました。私はまた、フィルター関数を別の関数に持ち込みました。 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