- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
6天前,我问了这个问题:
how to select from filtervalues where genre comma delimited values contain only what is selected
我得到了答案;一位同事提供了这个解决方案:
https://jsfiddle.net/AnishPatelUk/7swLn92c/
<小时/>但是我遇到了另一个问题。尽管我让它在逗号字符串中搜索匹配项并返回匹配项的长度等于数组。此代码不完整。
目标是让用户选择多个流派,然后这些流派就会出现。但是当用户选择 DVD 或蓝光等媒体类型时。结果应显示 DVD 和/或蓝光类型的所有项目。
例如:
用户选择:冒险、科幻、蓝光;只应出现《星球大战》和《黑客帝国》。
如果用户选择:冒险、科幻; 《星球大战》、《指环王》和《黑客帝国》应该会出现。
为了选择我使用的一场比赛:
var match = ko.utils.arrayFirst(genreValues,
function (genre) {
return self.filterValues.indexOf(genre.trim()) > -1;});
if (match) {
return match;
}
但是为了调出我使用的所有匹配结果:
var matches = ko.utils.arrayFilter(genreValues, function (genre) { return
self.filterValues.indexOf(genre.trim()) >= 0; });
return matches.length === self.filterValues().length;
也许有一种方法可以将它们结合起来?这是我的 fiddle 尝试: https://jsfiddle.net/0jr5Lc25/
最佳答案
self.filterProducts = ko.computed(function () {
return ko.utils.arrayFilter(self.products(),function (product) {
var genreValues = product.genre.split(",");
var mediaValues = product.media;
var genreMatch = false;
var mediaMatch = false;
ko.utils.arrayForEach(genreValues, function (genre) {
if( self.filterValues.indexOf(genre.trim()) >= 0){
genreMatch = true;
}
//return self.filterValues.indexOf(genre.trim()) >= 0;
});
if(self.filterMedia().length === 0){
mediaMatch = true;
}
if(self.filterValues().length === 0){
genreMatch = true
}
// if string
if(self.filterMedia().indexOf(mediaValues.trim()) >= 0){
mediaMatch = true;
}
// if array
//ko.utils.arrayForEach(mediaValues, function (media) {
//if(self.filterMedia().indexOf(media.trim()) >= 0){
//mediaMatch = true;
//}
//});
if(genreMatch && mediaMatch){
return true;
} return false;
});
});
您遇到了一些问题;
ko.utils.arrayFilter 只需使用一次。
var mediamatches = ko.utils.arrayFilter(mediaValues ... 与 self.filterValues 进行比较,需要是 mediaValues。
蓝光不等于蓝光
科幻 html 复选框已正常工作,已更正 html。
关于javascript - knockout : how to filter by genre AND by mediatype,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33350092/
我是一名优秀的程序员,十分优秀!