多个 jQuery 选择器，ID 以特定字符开头

Question

我在第三方应用程序中遇到了这个问题。现在第三方应用程序为我的文本字段和复选框生成了如下 ID：-

ItemQuickOrder_a91a0ce2-7fb6-4c9c-97f5-e851cf4f10a6_MultiChoiceOption_0
ItemRequired_1817888e-9d2e-4ad6-87a0-1713c7b7dd97_MultiChoiceOption_0
ItemOneOffCost_ef64a5b1-07e1-40ce-8c80-2f2ace717b4f_$CurrencyField
ItemMonthlyReoccurringCost_f60c47be-2361-47eb-92f5-9b4ec7a0c057_$CurrencyField
ItemAnnualRecurringCost_db2c2537-e1b9-40bf-badc-a09637616aaa_$CurrencyField

所以现在我想编写一个 jQuery 函数，当上面的文本和复选框被更改时（有人在文本字段中输入一个字符，或者选中/取消选中一个复选框），它会被触发。所以我写了这个测试函数：-

$("#ItemQuickOrder_a91a0ce2-7fb6-4c9c-97f5-e851cf4f10a6_MultiChoiceOption_0,
#ItemRequired_1817888e-9d2e-4ad6-87a0-1713c7b7dd97_MultiChoiceOption_0,
#ItemOneOffCost_ef64a5b1-07e1-40ce-8c80-2f2ace717b4f_$CurrencyField,
#ItemMonthlyReoccurringCost_f60c47be-2361-47eb-92f5-9b4ec7a0c057_$CurrencyField,
#ItemAnnualRecurringCost_db2c2537-e1b9-40bf-badc-a09637616aaa_$CurrencyField").change(function() 
{
  alert( "Handler for .change() called." );
});

但我收到了这个错误：

SyntaxError: unterminated string literal

现在我认为这个错误与我的 jQuery 选择器在多行中输入的事实有关。所以我尝试拆分它们，但我收到一个错误，我的 ID 中不能包含 $。

所以我的问题是如何使我的 jQuery 脚本更具可读性，但是根据以特定字符开头的 ID 选择我的项目，因为我的 IDS 将具有以“ItemQuickOrder”或“ItemRequired”等开头的唯一字符。

Answer 1

这是我会做的方式，对我来说似乎更具可读性。

let idsBeginWith = [
  "ItemQuickOrder",
  "ItemRequired",
  "ItemOneOffCost",
  "ItemMonthlyReoccurringCost",
  "ItemAnnualRecurringCost"
];
// ES6
$(idsBeginWith.map(e=>`[id^="${e}"]`).join(",")).change(function(){
  alert( "Handler for .change() called." );
});
// ES5
$(idsBeginWith.map(function(e){ return '[id^="'+e+'"]';}).join(",")).change(function(){
  alert( "Handler for .change() called." );
});

Answer 2

你必须用 \ 转义 $，你也可以在字符串的末尾使用 \ 来定义多行的字符串。（但是换行符不是字符串的一部分）

$("#ItemQuickOrder_a91a0ce2-7fb6-4c9c-97f5-e851cf4f10a6_MultiChoiceOption_0,\
#ItemRequired_1817888e-9d2e-4ad6-87a0-1713c7b7dd97_MultiChoiceOption_0,\
#ItemOneOffCost_ef64a5b1-07e1-40ce-8c80-2f2ace717b4f_\\$CurrencyField,\
#ItemMonthlyReoccurringCost_f60c47be-2361-47eb-92f5-9b4ec7a0c057_\\$CurrencyField,\
#ItemAnnualRecurringCost_db2c2537-e1b9-40bf-badc-a09637616aaa_\\$CurrencyField").change(function() 
{
  alert( "Handler for .change() called." );
});