多个 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." );
});