修改JQuery实时筛选解决方案以筛选多个属性值

我一直在使用XHTML、CSS和JS从现有的第三方产品构建一个实时过滤解决方案。我能够让第一阶段开始工作，但我想解决问题的"奖励"是新的、更大的问题。万岁！：D所以，这是情景喜剧。。。

我有三个SelectMultiple下拉菜单，它们根据相应的菜单值过滤页面上的div。用户可以在每个菜单中选择多个选项来过滤页面上的对象。例如：

HTML菜单

<select multiple="multiple" id="product" class="filterby">                           
<option value="Product1">
Product 1
</option>
<option value="Product2">
Product 2
</option>
<option value="Product3">
Product 3
</option>
</select>
<select multiple="multiple" id="role" class="filterby">                           
<option value="Tech">
Technician
</option>
<option value="Manager">
Manager
</option>
<option value="ITS">
IT Specialist
</option>
</select>
<select multiple="multiple" id="type" class="filterby">                           
<option value="HDesk">
Help Desk Request
</option>
<option value="ServCent">
Service Center Call
</option>
<option value="Onsite">
Onsite Visit
</option>
</select>

最初，页面上的div包含相应的菜单值，允许解决方案适当地过滤内容，如下所示：

<div class="Product1 Product3 Manager Onsite"> Paragraphs, images, videos and other neat stuff in my div </div>

在上面的例子中，如果用户选择了一个或多个匹配的菜单选项，就会显示这个div。相当基础，对吧？

支持这一点的JQuery简直太优雅了！我在StackOverflow上找到了它，我喜欢它。工作很棒！！！

$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#FilterContainer").find("div").hide();
$("div#FilterContainer").find("div." + filters).show();
});

这几行代码映射并连接了我所有三个多选菜单中的任何选定项目，并适当地"显示/隐藏"div。美丽的事物。太厉害了！

好的。既然我已经在这方面取得了成功，就有了新的要求(当然(：

我需要我的代码来查找段落而不是div
我需要我的代码将我的菜单值与段落属性值相匹配，而不是使用那些包含筛选值的类
我需要我的代码来显示或隐藏段落，就像以前一样，基于一个或多个菜单选择

我尝试了很多方法来实现这一点，但似乎都不起作用。

以下是我迄今为止的进展：

$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("p[data-mc-conditions]").hide();
$("p[data-mc-conditions]"+ filters).show();
});

这将不起作用，因为页面上的所有段落现在都包含"data mc conditons"属性。示例：

<p data-mc-conditions="Default.Product1,Default.Product3,Default.Manager,Default.Onsite>Content"</p>

因此，简单地定义属性"data-mc-conditions"还不够。我还必须指定属性值，它将类似于：

"p[data-mc-conditions='Default.Product1']"

但这确实很具体，而且似乎无论如何都不起作用。我必须为每个属性值对创建条目。不太好。

所以，为了方便起见，这里又是原始的JQuery：

$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#FilterContainer").find("div").hide();
$("div#FilterContainer").find("div." + filters).show();
});

我需要的是：

$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
// If data-mc-condition values DON'T match selected menu values, hide <p>
// If data-mc-condition values DO match selected menu values, show <p>

});

如果上面的代码不再支持我尝试做的事情，或者任何等效的代码。我真的很感谢你的帮助<3

您能用正确的语法回复，将[attr*=value]包含在以下内容中吗？

为了弄清楚我们需要如何将哪些部分粘在一起，让我们为多个选定的值写下我们真正想要的结果：

[attr*='value'][attr*='value'][attr*='value']

value部分是我们将从数组中获得的动态部分，其余部分我们需要添加-这样，就可以很容易地确定我们需要在值之间添加什么(通过.join()(，以及哪些部分需要在之前和之后添加

[attr*='value'][attr*='value'][attr*='value']
^^^^^^^^     ^^^^^^^^^^     ^^^^^^^^^^     ^^
before       between        between        after

现在，您的实际属性名称是data-mc-conditions，我们需要在每个值之前添加Default.，所以我们可以使用这个

$("select.filterby").change(function() {
var filters = "[data-mc-conditions*='Default." +
$.map($("select.filterby").toArray(), function(e) {
return $(e).val();
}).join("'][data-mc-conditions*='Default.") + 
"']";
console.log(filters)
});

这将给我们带来这样的结果

[data-mc-conditions*='Default.Product2'][data-mc-conditions*='Default.Product3'][data-mc-conditions*='Default.Manager']

现在可以插入它来为隐藏所有元素后我们仍然想看到的元素生成完整的选择器：

$("div#FilterContainer p" + filters).show();

https://jsfiddle.net/a5q4cw2x/

相关内容

最新更新

热门标签：