串在一起时，查询中的 JS var 不起作用

Question

我有下面的代码，真的很臃肿

$(".field-name-field-parts-status .field-item:contains('Submitted'), .field-name-field-parts-status .field-item:contains('Saved'), .field-name-field-parts-status .field-item:contains('HMNZ Approved')").addClass('btn-primary');

我试图通过添加 var

来整理它

var fieldItemStatus = $(".field-name-field-parts-status .field-item");

原来是这样

$(fieldItemStatus + ":contains('Submitted'), " + fieldItemStatus + ":contains('Saved'), " + fieldItemStatus + ":contains('HMNZ Approved')").addClass('btn-primary');

但是它停止工作了，谁能告诉我我做错了什么？谢谢

Answer 1

因为您正试图将一个 jQuery 对象和一个字符串相加。它不是那样工作的。

var fieldItemStatus = $(".field-name-field-parts-status .field-item");

应该是字符串

var fieldItemStatus = ".field-name-field-parts-status .field-item";

另一个选项是使用过滤器。

Answer 2

您可以使用 filter 方法：

fieldItemStatus.filter(":contains('Submitted'), :contains('Saved'), :contains('HMNZ Approved')").addClass('btn-primary');

另一种选择是使用 filter 回调函数：

var items = ['Submitted', 'Saved', 'HMNZ Approved'];
fieldItemStatus.filter(function(_, el) {
   return items.some(function(item) {
      return el.textContent.indexOf(item) > -1;
   });  
});

.

Answer 3

你需要使用.filter()

fieldItemStatus.filter(":contains('Submitted'), :contains('Saved'), :contains('HMNZ Approved')").addClass('btn-primary');

fieldItemStatus 是一个对象所以 fieldItemStatus + ":contains('Submitted'), " + fieldItemStatus + ":contains('Saved'), " + fieldItemStatus + ":contains('HMNZ Approved') 将创建一个类似于 [Object object]:contains('Submitted'), [Object object]:contains('Saved'), [Object object]:contains('HMNZ Approved')

的字符串

Answer 4

删除 fieldItemStatus 前面的 $

 var fieldItemStatus = ".field-name-field-parts-status .field-item";

Answer 5

因为您想使用 jQuery 对象来连接字符串。正确的做法是始终使用字符串。

var fieldItemStatus = ".field-name-field-parts-status .field-item";
$(fieldItemStatus + ":contains('Submitted'), " + fieldItemStatus + ":contains('Saved'), " + fieldItemStatus + ":contains('HMNZ Approved')").addClass('btn-primary');

Answer 6

一种更程序化的方法。这样，如果您想轻松更改选择器，只需更改 contains 数组即可。您可以将其转换为一个函数，以便在脚本的其他地方按需轻松检索您的选择器。

var contains = ['Submitted','Saved','HMNZ Approved'];
var selector = '';
for(var i = 0; i < contains.length; i++) {
    selector += '.field-name-field-parts-status .field-item:contains("' + contains[i] + ')';
    if(i < contains.length - 1) selector += ', ';
}
$(selector).addClass('btn-primary');

串在一起时，查询中的 JS var 不起作用

JS var inside query does not work when stringed together

javascript

jquery

contains