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

【问题标题】：JS var inside query does not work when stringed together串在一起时，查询中的 JS var 不起作用
【发布时间】：2015-08-01 01:15:52
【问题描述】：

下面的代码真的很臃肿

$(".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');

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

【问题讨论】：

感谢大家的快速回答，.filter( ) 绝对是要走的路！

标签： javascript jquery contains

【解决方案1】：

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

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

应该是字符串

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

其他选项是使用过滤器。

【讨论】：

【解决方案2】：

你需要使用 .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') 的字符串

【讨论】：

【解决方案3】：

去掉fieldItemStatus前面的$

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您可以使用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;
   });  
});

.

【讨论】：

【解决方案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');

【讨论】：