我现在尝试过滤两个选项，但是稍后将添加第三个选项，也许还会添加第四个选项（例如：现在，我在价格和评论之间进行过滤，但希望将更多价格添加到列表中，还有另一个过滤器类别，例如“等级”，由3星，4星或5星组成。
使用我在下面列出的逻辑可以很好地工作，但是我觉得随着时间的推移，它会变得非常漫长而复杂（并且不必要）。我知道有一种重构代码的方法，我只是想知道实现它的最佳方法是什么？
HTML：
<select class="deals">
<option value="deals-all">All deals</option>
<option value="50">$50</option>
<option value="25">$25</option>
</select>
<select class="reviews">
<option value="reviews-all">All reviews</option>
<option value="reviews-positive">Positive reviews</option>
<option value="reviews-negative">Negative reviews</option>
</select>
jQuery的
$('.reviews, .deals').change(function() {
var reviewsVal = $('.reviews :selected').val();
var dealsVal = $('.deals :selected').val();
if((reviewsVal == 'reviews-all') && (dealsVal == 'deals-all')) {
$('.review-positive').show();
$('.review-negative').show();
$('.deals-25').show();
$('.deals-50').show();
}
else if((dealsVal == '50') && (reviewsVal == 'reviews-positive')) {
$('.review-negative.deals-50').hide();
$('.review-positive.deals-50').show();
$('.review-negative.deals-25').hide();
$('.review-positive.deals-25').hide();
}
else if((dealsVal == '50') && (reviewsVal == 'reviews-negative')) {
$('.review-negative.deals-50').show();
$('.review-positive.deals-50').hide();
$('.review-negative.deals-25').hide();
$('.review-positive.deals-25').hide();
}
else if((dealsVal == '25') && (reviewsVal == 'reviews-positive')) {
$('.review-negative.deals-50').hide();
$('.review-positive.deals-50').hide();
$('.review-negative.deals-25').hide();
$('.review-positive.deals-25').show();
}
else if((dealsVal == '25') && (reviewsVal == 'reviews-negative')) {
$('.review-negative.deals-50').hide();
$('.review-positive.deals-50').hide();
$('.review-negative.deals-25').show();
$('.review-positive.deals-25').hide();
}
else if((dealsVal == 'deals-all') && (reviewsVal == 'reviews-positive')) {
$('.review-negative.deals-50').hide();
$('.review-positive.deals-50').show();
$('.review-negative.deals-25').hide();
$('.review-positive.deals-25').show();
}
else if((dealsVal == 'deals-all') && (reviewsVal == 'reviews-negative')) {
$('.review-negative.deals-50').show();
$('.review-positive.deals-50').hide();
$('.review-negative.deals-25').show();
$('.review-positive.deals-25').hide();
}
else if((dealsVal == '50') && (reviewsVal == 'reviews-all')) {
$('.review-negative.deals-50').show();
$('.review-positive.deals-50').show();
$('.review-negative.deals-25').hide();
$('.review-positive.deals-25').hide();
}
else if((dealsVal == '25') && (reviewsVal == 'reviews-all')) {
$('.review-negative.deals-50').hide();
$('.review-positive.deals-50').hide();
$('.review-negative.deals-25').show();
$('.review-positive.deals-25').show();
}
else {
$('.review-positive').show();
$('.review-negative').show();
$('.deals-25').show();
$('.deals-50').show();
}
});
$('.reviews-positive').click(function() {
$('.review-negative').hide();
$('.review-positive').show();
});
$('.reviews-negative').click(function() {
$('.review-positive').hide();
$('.review-negative').show();
});
});
希望您能看到我要做什么，谢谢您的投入。
*编辑：jsfiddle：http://jsfiddle.net/TXywp/1/
最佳答案
为了获得动态结果，标准化的命名是最好的方法。
首先要标准化条件选择器，为它们提供一个通用类，并通过id属性进行区分。还建议遵循值的命名对流。这会产生一些
<select id="deal" class="criteriaSelector">
<option value="all">All deals</option>
<option value="50">$50</option>
<option value="25">$25</option>
</select>
<select id="review" class="criteriaSelector">
<option value="all">All reviews</option>
<option value="positive">Positive reviews</option>
<option value="negative">Negative reviews</option>
</select>
然后，除了过滤类之外，还提供要过滤通用类的所有项目。我将以.item为例。您还将希望能够根据选定的值和条件名称来构造类，因此使用。{id}-{value}系统将可以完美地工作。这将给我们留下一些与
<div class="item review-positive deal-25"></div>
<div class="item review-negative deal-50"></div>
此设置将使我们能够构建动态且可扩展的代码：
$('.criteriaSelector').change(function() {
// Initialize criteria string
var criteria = '';
// Set value for all selector
var showAll = true;
// Iterate over all criteriaSelectors
$('.criteriaSelector').each(function(){
// Get value
var val = $(this).children(':selected').val();
// Check if this limits our results
if(val !== 'all'){
// Append selector to criteria
criteria += '.' + $(this).attr('id') + '-' + val;
// We don't want to show all results anymore
showAll = false;
}
});
// Check if results are limited somehow
if(showAll){
// No criterias were set so show all
$('.item').show();
} else {
// Hide all items
$('.item').hide();
// Show the ones that were selected
$(criteria).show();
}
});
现在，只要遵循命名约定，添加新的条件选择器就无需在这段代码中进行更改。