使用Jquery

Question

根据用户的特定条件过滤carArray。

当用户选中red复选框时，它会过滤掉带有红色油漆的汽车。当用户选中green复选框时，它将过滤带有绿色油漆的汽车。当用户选中red和green复选框时，它会同时显示红色和绿色汽车。（以及N个用户条件等）

我在这个例子中使用了2个复选框。我的实际实现中有超过5个复选框。

我开始使用showRed，showGreen布尔变量来跟踪用户想要的内容以及car个对象的数组。

[ {
       carName: xxx, 
       color: 'red'
  },
  {
       carName: yyy, 
       color: 'green'
  },
   .....
]

filteredCars = carArray.filter((car) => {
    // Problem: I tried to check for showRed and 
    // showGreen before returning but found out that I can 
    // only return once in here
    if (showRed) {
        return car.color === 'red';
    }
    if (showGreen) {
        return car.color === 'green';
    }
});

我目前在使用多个用户条件进行过滤时遇到了一些问题。

Answer 1

为什么不将想要的颜色放在数组colors中并检查汽车颜色

filteredCars = carArray.filter(({ color }) => colors.includes(color));

Answer 2

在复选框更改时，您应该构建一个选中颜色的数组。例如，如果选中.tabset-style[_ngcontent-c14] ul.tabset-header[_ngcontent-c14] li[_ngcontent-c14]{ ... }和red，则生成green数组。然后，对于您的过滤器功能，测试以确定汽车的颜色是否包含在该阵列中：

['red', 'green']

Answer 3

快速猜测：return退出调用堆栈。您应该继续迭代并使用找到的正确条目填充临时数组，然后返回该数组。也就是说，做一个'贪婪'的搜索。

Answer 4

使用Jquery

let selection = [];


$(".checkBox").each(function() { //you can change .checkBox to your checkBox Id.
    if ($( this ).prop("checked")){
        selection.push( $( this ).text() );
    }
})

您可以使用此代码段。

然后使用此数组构建过滤器。

Answer 5

以下是如何使用从对象获取值的getter（在本例中为color）和比较器来构建过滤器函数，该比较器将比较该值并返回true或false（在本例中为名为{{的函数） 1}}部分应用了一组颜色）：

＆＃13;

  svg.selectAll(".labels")
              .data(data)
              .enter().append("text")
              .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
              .attr("dy", ".70em")
              .text(function(d) { return d.TrackName; })
              .attr("fill", function(d, i) { return color(i); });

＆＃13;

Answer 6

我对这个案子的两分钱是我会按颜色对车进行分组，所以每当复选框被更改时我都不需要逐个过滤每辆车。

我会从地图获得经检查颜色的汽车（其中钥匙是一种颜色，并且是该颜色的汽车数组）。

另一方面，我使用ramda来避免样板，因为它已经实现了 groupBy 。

const cars = [{
    carName: 'xxx',
    color: 'red'
  },
  {
    carName: 'yyy',
    color: 'green'
  }
]

const carMap = R.groupBy(car => car.color, cars)

// A function to get multiple keys of a given map
// (using objects instead of Map). It will get one or 
// more arrays, and that's why I use R.flatten: to get a flat 
// array of cars of different colors
const multiMapGet = (keys, map) => R.flatten(keys.map(key => map[key]))

// The array of colors would be the checked checkbox selected
// colors
const carsOfColors = multiMapGet(['red', 'green'], carMap)

console.log(carsOfColors)

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>

Answer 7

let filteredCars=[];
            let filteredData = carsArray.filter(function(car){
                    if(showRed && car.color === 'red') {
                        filteredCars.push(car);
                    }
                    if(showGreen && car.color === 'green') {
                        filteredCars.push(car);
                    }
                    //any other color or filter that u want to implement can go here
            })

filteredCars将包含应用所有过滤器后可用的汽车列表。

使用1个数组条件和外部布尔条件过滤数组

7 个答案:

使用Jquery