jquery 如何在JS Find函数中使用条件语句

vuktfyat  于 2023-11-17  发布在  jQuery
关注(0)|答案(2)|浏览(129)

我想知道如何在 JSfind函数中使用if语句?
这里我的目标是当这些值与汽车数组中的元素不匹配时。

cars.map(car => active_filters.find(x =>
    if (car.attr(x.id) !== x.value)
        return car.addClass("filtered-out");
));

字符串

tkqqtvp1

tkqqtvp11#

我不知道你写的逻辑是真是假,但你可以用简单的循环和检查条件。

cars.forEach(function(car) {
  for (var i = 0; i < active_filters.length; i ++) {
    if (car.attr(active_filters[i]['id']) !== active_filters[i]['value']) {
      car.addClass("filtered-out");
      break;
    }
  }
});

字符串
或其它类似的东西

cars.forEach(function(car) {

  var found = active_filters.find(function(el) {
    return car.attr(el['id']) === el['value'];
  });

  if (!found) {
    car.addClass("filtered-out");
  }
});

2ekbmq32

2ekbmq322#

cars.map(car => active_filters.find(x =>
    if (car.attr(x.id) !== x.value)
        return car.addClass("filtered-out");
));

字符串
有多个问题。首先,您没有将.map()的结果分配给任何东西,所以它是一个无用的计算,除了在适当的地方添加类。其次,对于car的输入,您将得到find()的结果作为结果,但.find()返回表达式为true或undefined的第一个索引。然而,你的表达式可能总是undefined,因为如果条件是false,那么你甚至没有return语句。然而,如果条件是true,那么你返回addClass()返回的任何东西。如果.addClass()返回其他东西,那么只要条件是truefind()就会返回它。最后,你把你的结构变化和你的搜索查找器混淆了,这通常不是一个好主意,因为它混合了应该分开的关注点。
这是一个可能有帮助的示例代码:

let active_filters = {
    ["between 2-7"] : function(item) {
        let val = parseInt(item.innerText);
        return (2 <= val) && (val <= 7);
    },
    "odd" : function(item) {
        return parseInt(item.innerText) % 2;
    }
};

let cars = [...document.querySelectorAll(".car")];

cars.forEach(function(item) {
    for (let key in active_filters) {
        if (!active_filters[key](item)) {
            item.classList.add("filtered_out");
            continue;
        }
    }
});

let finalCars = cars.filter(item => !item.classList.contains("filtered_out"));

console.log(finalCars);

x

.car {
    background-color: green;
}

.car.filtered_out {
    background-color: red;
}
<div class="car">1</div>
<div class="car">2</div>
<div class="car">3</div>
<div class="car">4</div>
<div class="car">5</div>
<div class="car">6</div>
<div class="car">7</div>
<div class="car">8</div>

的字符串
说明:

  • 我创建了几个div元素,这样我们就有了一些上下文
  • 我根据汽车是否符合所有的过滤条件给它们上色
  • 我定义了一个active_filters对象,它是键值对,键是过滤器的名称,值是它使用名为item的输入计算的值
  • I回路cars
  • 对于每辆车,我循环active_filters
  • 如果汽车不符合当前过滤器,
  • 我将filtered_out类添加到它
  • continue
  • 我搜索具有filtered_outclasscars并记录结果。

相关问题