Первые строки вашего скрипта не нужны. В первой строке вы создаете новый пустой объект и присваиваете его переменной regions
. Затем на следующей строке вы переназначаете значение этой переменной другому объекту, который вы создаете. {key: val, ...}
- это способ построения объектов в javascript, и вы можете просто написать
let regions = {
st0 : {
svgId : ".st0",
htmlId : "#olmes",
gradientId : "st0-gradient"
},
//...
};
Ответ, который дал Рори МакКроссан, верен ({ ссылка }), но я ' Я бы сказал, что вы можете переписать свою логику c так, чтобы ее было проще поддерживать. Кажется, что большинство ваших значений, которые вы используете, могут быть построены из порядка, который они имеют в вашем списке, поэтому я бы посоветовал вам просто создать список регионов и немного обновить свой jQuery, как я покажу ниже. Это означало бы, что вам не нужно повторяться во многих местах со всеми рисками, чтобы где-то ошибиться.
let regions = [
"#olmes",
"#foix",
"#tarascon",
"#haute-ariege",
"#mirepoix",
"#portes-ariege",
"#arize-leze",
"#couserans",
];
function makeGradientId(id){ return ".st" + id + "-gradient" };
function makeSvgId(id){ return ".st" + id };
// in javascript, an array can be regarded as a fancy object with the keys '0', '1', '2', '3',...
const allGradientIds = Object.keys(regions).map(makeGradientId);
jQuery.each(function(index, htmlId) {
const svgId = makeSvgId(index);
const gradientId = allGradientIds[index];
jQuery(svgId).addClass("region");
jQuery(svgId).click(function() {
jQuery(".region-titre").removeClass("region-active");
jQuery(htmlId).addClass("region-active");
jQuery(".region").removeClass(allGradientIds.join(" "));
jQuery(svgId).addClass(gradientId);
});
});
В более современных javascript мы написали бы вспомогательные функции выше как:
const makeGradientId = (id) => `.st${id}-gradient`;
const makeSvgId = (id) => `.st${id}`;
, который, на мой взгляд, легче читать, но может потребовать некоторой практики, чтобы привыкнуть. (см. https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/ и https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)