Javascript 互斥数据属性选择器

是否可以基于互斥数据属性选择元素，例如：I'd to.显示数据属性为country=united kingdom且类型为partner或director的任何div？比如：

$('.post[data-country="united-kingdom"]&[data-type="partner,director"]').show();

或

---

可以添加多个以逗号分隔的选择器

$('.post[data-country="united-kingdom"][data-type="artist"], .post[data-country="united-kingdom"][data-type="partner"]').show();

或者使用带有选择器的过滤器

$('.post[data-country="united-kingdom"]').filter('[data-type="artist"], [data-type="partner"]').show();

或带有回调的筛选器

var countries = ["united-kingdom", "india", "france"],
    types     = ["artist", "partner"];

$('.post').filter(function() {
    return types.indexOf( $(this).data('type') ) !== -1 &&
           contries.indexOf( $(this).data('coutry') ) !== -1;
}).show()

我想。是否显示数据属性为country=united kingdom，类型为partner或director的div

那么你想要一个：

也就是说：匹配任何

具有类post，数据国家设置为英国，数据类型设置为合作伙伴

或

具有类post，数据国家设置为英国，数据类型设置为director

or部分来自，，这使其成为选择器组而不是单个选择器

你在评论中说：

用户可以从每个分类术语中选择十个或更多个，这些分类术语需要生成此条件的大量排列

在这种情况下，您最好使用过滤器：

然后

在ES2016或更高版本中，您可以使用-这给了您一个简单的布尔值-而不是ArrayIndex，您必须对照-1进行检查；还有一种polyfill，您可以在ES2015及更早的版本中使用…：

var results = $(".post[data-country][data-type]").filter(function() {
    var $this = $(this);
    return countries.includes($this.attr("data-country") &&
           types.includes($this.attr("data-type");
});

这甚至可以更进一步：

var criteria = {};
// From inputs, ...
criteria["country"] = ["united-kingdom"];
criteria["type"] = ["parter", "director"];

然后

只要我们考虑ES2015和ES2016：

const keys = Object.keys(criteria);
const results = $(selector).filter(() => {
    const $this = $(this);
    return keys.every(key => criteria[key].includes($this.attr("data-" + key)));
});

或者如果你真的想发疯：

const keys = Object.keys(criteria);
const results = $(selector).filter(() =>
    keys.every(key => criteria[key].includes(this.getAttribute("data-" + key)))
);

---

我不认为是这样，我应该澄清一下。。。我有两个分类菜单：国家和类型。用户将能够从每个列表中选择多个，以便请求匹配国家的结果：英国、爱尔兰或法国以及合作伙伴或艺术家。因此，如果一个帖子被列为data country=France和data type=artist，那么它将被返回。我正在向一对或多个数组添加或从中删除值，然后使用.show筛选内容。您可以使用带有回调的筛选器，并筛选您想要的任何数据属性，但您必须更具体地说明您在这里尝试执行的操作？这将得到我想要的结果。我想我是想找一件短一点的东西：-。用户可能会从每个分类术语中选择十个或更多个，这些术语需要生成此选择器组的置换负载。@KevinNugent:在这种情况下，您最好使用过滤器；我在结尾添加了一条注释。谢谢@T.J.Crowder。我现在正在尝试这些。这就像T.J.Crowder的魅力一样。谢谢你的详细解释。我有一个后续问题：我在每个分类菜单上都有一个“show all”选项，它清空了相关的数组-您建议我如何在filter函数中处理这个问题？目前它解释为“无国家”，但我希望它解释为“所有国家”。@KevinNugent:我将更改key.every:key.everykey=>中的条件！criteria[key]| | criteria[key]。包括this.getAttributedata-+key，例如，因此如果该条件有空值，则为真。

var results = $(".post[data-country][data-type]").filter(function() {
    var $this = $(this);
    return countries.includes($this.attr("data-country") &&
           types.includes($this.attr("data-type");
});

var criteria = {};
// From inputs, ...
criteria["country"] = ["united-kingdom"];
criteria["type"] = ["parter", "director"];

var keys = Object.keys(criteria);
var selector= ".post" + keys.map(function(key) {
    return "[data-" + key + "]";
}).join();
var results = $(selector).filter(function() {
    var $this = $(this);
    return keys.every(function(key) {
        return criteria[key].includes($this.attr("data-" + key));
    });
});

const keys = Object.keys(criteria);
const results = $(selector).filter(() => {
    const $this = $(this);
    return keys.every(key => criteria[key].includes($this.attr("data-" + key)));
});

const keys = Object.keys(criteria);
const results = $(selector).filter(() =>
    keys.every(key => criteria[key].includes(this.getAttribute("data-" + key)))
);