我有一个列出大量数据的表（每行都是一个商品，可能有几百个）。每个报价都有与之相关的数据：组ID（多个报价可以在同一组中），成本，如果您必须交易其他项目作为履行报价的要求等。
我做了一个小提琴演示： http://jsfiddle.net/gd5Nd/
因为我需要包含小提琴链接的代码：
<label class='checkbox'>
<input type='checkbox' class='toggle' id='filterToggle' value='true' data-toggle='filtering' />Filtering Options</label>
<fieldset id='filtering'>
<label class='checkbox'>
<input type='checkbox' class='filter' value='1' data-type='req' />Offers with Required Items</label>
<label class='checkbox'>
<input type='checkbox' class='toggle' id='groupToggle' value='true' data-toggle='groups' />Filter By Group</label>
<fieldset id='groups'>
<div class="col-md-3">
<label class='checkbox'>
<input type='checkbox' class='filter' value='11' data-type='group' />Cap Boosters</label>
</div>
<div class="col-md-3">
<label class='checkbox'>
<input type='checkbox' class='filter' value='475' data-type='group' />Datacores</label>
</div>
<div class="col-md-3">
<label class='checkbox'>
<input type='checkbox' class='filter' value='24' data-type='group' />Gunslinger Implants</label>
</div>
</fieldset>
</fieldset>
<table class='table table-striped table-hover table-condensed' id='offerList'>
<tr>
<th>Offer</th>
<th>Items Req</th>
<th>LP Cost</th>
<th>ISK Cost</th>
</tr>
<tr id='offer-1607' data-group='11' data-isk='60000' data-lp='60' data-req='1'>
<td><a href='offer/1607/'>20x Navy Cap Booster 25</a>
</td>
<td>1</td>
<td>60</td>
<td>60,000</td>
</tr>
<tr id='offer-1608' data-group='11' data-isk='125000' data-lp='125' data-req='1'>
<td><a href='offer/1608/'>20x Navy Cap Booster 50</a>
</td>
<td>1</td>
<td>125</td>
<td>125,000</td>
</tr>
<tr id='offer-1609' data-group='11' data-isk='185000' data-lp='185' data-req='1'>
<td><a href='offer/1609/'>20x Navy Cap Booster 75</a>
</td>
<td>1</td>
<td>185</td>
<td>185,000</td>
</tr>
<tr id='offer-1431' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1431/'>5x Datacore - Amarrian Starship Engineering</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1432' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1432/'>5x Datacore - High Energy Physics</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1433' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1433/'>5x Datacore - Laser Physics</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1434' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1434/'>5x Datacore - Mechanical Engineering</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1435' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1435/'>5x Datacore - Nanite Engineering</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1464' data-group='11' data-isk='250000' data-lp='250' data-req='1'>
<td><a href='offer/1464/'>20x Navy Cap Booster 100</a>
</td>
<td>1</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-249' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/249/'>1x Eifyr and Co. 'Gunslinger' Large Projectile Turret
LP-1001</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-252' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/252/'>1x Eifyr and Co. 'Gunslinger' Medium Projectile Turret
MP-801</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-255' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/255/'>1x Eifyr and Co. 'Gunslinger' Motion Prediction
MR-701</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-258' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/258/'>1x Eifyr and Co. 'Gunslinger' Small Projectile Turret
SP-601</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-261' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/261/'>1x Eifyr and Co. 'Gunslinger' Surgical Strike
SS-901</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
</table>
JS：
$(document).ready(function () {
// !- Bind checkboxes to show filters
$('input[type="checkbox"].toggle').bind("change", function () {
if (typeof $(this).data('toggle') != 'undefined') {
if ($(this).is(":checked")) {
$("#" + $(this).data('toggle')).show();
} else {
$("#" + $(this).data('toggle')).hide();
}
}
}).trigger('change');
$('input[type="checkbox"].filter').bind("change", function () {
switch ($(this).data('type')) {
case 'group':
var filtered = $('*[data-group="' + this.value + '"]');
console.log("Affected offers for " + this.value + ": " + filtered.length);
filtered.toggleClass('danger');
break;
case 'req':
var filtered = $('*[data-req="1"]');
filtered.toggleClass('danger');
break;
}
}).trigger('toggle');
});
我遇到的问题是多个过滤器可能指向同一数据行。例如：我的报价是第11组（Cap Boosters）的一部分，它还需要交易物品。我有两个影响此问题的过滤器：具有必需的项目过滤器和组过滤器。
如果我要激活第11组的组过滤器，我会突出显示第11组的优惠。但是，当我使用所需项目激活过滤器时，我希望它保持突出显示。相反，它会删除突出显示。
这是因为我正在为强调开/关切换课程。我已经尝试过show（）/ hide（），它几乎做同样的事情（当然）。我试过的一件事不起作用的是addClass（）和removeClass（）。我认为它会附加类，所以如果你有两个过滤器添加了类，然后删除了一个过滤器，那么另一个过滤器的类仍然是活动的，但似乎addClass只添加了类，如果它尚未存在。
我可以进行一些检查，例如，如果我选择停用组切换，它将检查是否仍然检查了req项目切换。然而，这似乎是一个黑客，我不确定它是否会运作良好（我的例子是一个简化版本;实际上，有大约10组，我想添加更多的过滤器，所以我是不确定递归检查所有过滤器是否可行，以及每次检查/取消选中一个过滤器时它们是否会影响数据行。
我很好奇如何最好地解决指向同一数据行的多个过滤器的问题。
作为例程JS init的一部分，我基本上设置了一个“过滤容器”对象，最初的结构如下：rowID : Array()。每次添加过滤器时，过滤器都会将自身添加到该行的数组中（因此，在此示例中有两个过滤器，每行可以使用group或req进行过滤）。每次应用过滤器时，我们遍历匹配的行，并从列表中添加/删除过滤器。如果我们要添加过滤器，我们也会继续.hide()元素。如果我们删除过滤器，我们会检查数组是否为空，这意味着没有应用过滤器，然后我们.show()元素。
答案 0 :(得分：2)
甜。 EVE飞行员。
我认为你的主要问题是过分依赖简单的概念，比如CSS类或其他东西来实现你的目标。听起来您需要做的是跟踪数据结构中的所有不同市场项目，然后通过并“打开突出显示”您想要的项目。如果它已经突出显示，谁在乎，否则打开它（反之亦然）。这是我通常使用的策略，当我有可复制项目的复杂层次结构或复杂的分组时，例如您正在处理的内容。
答案 1 :(得分：1)
我认为你描述为“黑客”的解决方案很好 - 而且这是我能想到的唯一方法。我有一个想法，包括为每个过滤器选项添加一个额外的数据属性，然后通过那些而不是类来应用样式 IE：
<style>
.danger,
[data-req_style=1],
[data-group_style=11],
[data-group_style=475]{
...
}
</style>
然后，您可以安全地添加删除多个过滤器，而不是干扰其他过滤器，而不是切换类。但是，如果你有一个任意或不断扩展的过滤器列表，这将变得非常不可维护。
你的“黑客”解决方案是我实现它的方式，就像我的项目一样。类选择器和确定复选框的状态相当快，所以即使使用非常大的数据集，我也不会过分担心性能。