데이터 속성, 최소값 및 최대 값을 기준으로 항목을 숨기기

Question

목록에서 일부 항목을 제거하는 기본 필터를 만듭니다. 게이지가 12 개 밖에 없으므로 게으른 로딩이나 렌더링에 신경 쓰지 않아도됩니다. jQuery를 사용하여 항목을 숨길 수 있습니다.

항목은 select 드롭 다운의 번호를 사용하여 필터링되며, 하나는 minValue이고 다른 하나는 maxValue입니다. 각 div와 관련된 값은 div의 data-bedrooms에 저장됩니다.

내 드롭 다운 중 하나의 .change 내 논리를 유발하고

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

HTML 예. 그런 다음 filter()을 사용하여 minValue 및 maxValue의 조건과 일치하거나 일치하지 않는 항목을 반품하고 페이드 인/아웃합니다. 여기

는 작업에 모든 것을 볼 수있는 전체 코드 펜입니다 : http://codepen.io/anon/pen/ALdOLW

내가 발견하고하는 것은 첫 번째 선택이 작동하는지 (예를 선택한 분 4 당신은 4 아래 모든 것을 제거합니다)하지만 시도 최대 값을 선택하면 문제가 발생합니다.

두 번째 값을 선택하면 이전 결과가 모두 반환됩니다. 두 선택 항목을 함께 바인딩해야합니다.

어디로 잘못 가고 있습니까?

나는 모두 maxValue 및 minValue

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

을 확인하기 위해 fadeIn 및 fadeOut을 결합해야하지만, 나는 위의 잘못된 구문

Answer 1

영업 이익은, 내 생각 엔 당신의 코드가 여러 번 애니메이션 때문에 일부 경쟁 조건으로 실행 된 것입니다. 나는 코드 코드를 포크하고 코드를 재구성하여 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