Question

我有以下代码需要简化。

MenusDeroulants（string，html_element）是我正在11对上使用的函数，它为我提供了以下内容：

        MenusDeroulants("GetListeCatDdeurs", $("#cbx_Cat_Ddeur"));
        MenusDeroulants("GetListeCommunautes", $("#cbx_Communaute"));
        MenusDeroulants("GetListeOccupations", $("#cbx_Occupation"));
        MenusDeroulants("GetListeProvinces", $("#cbx_Province"));
        MenusDeroulants("GetListeScolarites", $("#cbx_Scolarite"));
        MenusDeroulants("GetListeSexes", $("#cbx_Sexe"));
        MenusDeroulants("GetListeSituations_Matrimoniales", $("#cbx_SituationMatrimoniale"));
        MenusDeroulants("GetListeSource_De_Revenus", $("#cbx_SrceRevenu"));
        MenusDeroulants("GetListeStatuts_Legaux", $("#cbx_StatutLegal"));
        MenusDeroulants("GetListeTranche_Revenu", $("#cbx_TrancheRevenu"));
        MenusDeroulants("GetListeVilles", $("#cbx_Ville"));

有没有一种方法可以简化它？我对数组和对象的理解是如此有限，以至于我找不到创建循环对象的方法。

Answer 1

改为使用对象数组。您也可以使用数组数组，但是对象数组将更具可读性，因为它具有描述其值的属性名称：

const list = [
  { string: 'GetListeCatDdeurs',   selector: '#cbx_Cat_Ddeur' },
  { string: 'GetListeCommunautes', selector: '#cbx_Communaute' },
  { string: 'GetListeOccupations', selector: '#cbx_Occupation' },
  // etc
];
list.forEach(({ string, selector }) => {
  MenusDeroulants(string, $(selector));
});

不确定所有MenusDeroulants的调用将是什么，但是如果第一个参数始终以GetListe开头并且选择器始终是以cbx_开头的ID，则可以重复通过在forEach循环中添加这些常见的子字符串，可以减少自己的负担：

const list = [
  { subString: 'CatDdeurs',   subSelector: 'Cat_Ddeur' },
  { subString: 'Communautes', subSelector: 'Communaute' },
  { subString: 'Occupations', subSelector: 'Occupation' },
  // etc
];
list.forEach(({ subString, subSelector}) => {
  MenusDeroulants('GetListe' + subString, $('#cbx_' + subSelector));
});

Answer 2

一种方法：

let params = [
  {method: "GetListeCatDdeurs", elem: "#cbx_Cat_Ddeur"},
  {method: "GetListeCommunautes", elem: "#cbx_Communaute"},
  // etc...
];
for (p of params)
  MenusDeroulants(p.method, $(p.elem));

Answer 3

您可以创建这样的对象数组：

var arr = [
  { 'fn': 'GetListeCatDdeurs', 'div': 'cbx_Cat_Ddeur' },
  { 'fn': 'GetListeCommunautes', 'div': 'cbx_Communaute' },
  { 'fn': 'GetListeOccupations', 'div': 'cbx_Occupation' } // continue...
];

arr.forEach(x => {
  MenusDeroulants(x.fn, $('#' + x.div));
});

或者，您可以仅创建一个div名称数组。如果所有这些div是单个div的子元素，则更加容易。然后通过RegEx生成GetListeCatDdeurs。例如：

var arr = [
  'cbx_Cat_Ddeur',
  'cbx_Communaute',
  'cbx_Occupation', // etc...
];

arr.forEach(x => {
  var fn = 'GetListe' + x.slice(x.indexOf('_') + 1).replace(/_/g, '') + 's';
  MenusDeroulants(fn, $('#' + x));
});

Answer 4

我想说的是，将值存储为data-* attributes并使用dataset或data()动态获取它们。给每个元素一个像类一样的通用标识符，然后遍历该集合。

HTML

<select id="cbx_Cat_Ddeur" class="dropdowns" data-method="GetListeCatDdeurs"></select>

JS

$('.dropdowns').each((index,element)={
  MenusDeroulants(element);
});

function MenusDeroulants(element){
  var method = element.dataset['method'];
  //or
  var method = $(element).data('method');
  /* do the rest of work */
}

这样，如果字符串值或元素的id之类的内容发生变化，则无需挖掘其他JS。无需存储静态数组或对象等。

对象或数组或两者兼有

4 个答案: