У меня есть проблема. Не знаю как решить. Нужен чистый JS.
Есть многоуровневый объект, который делится на 4 этапа:
Страна,
Город,
Улица,
Достопримечательности. И 4 блока (2, 3 и 4 пустые).
1) Мне нужно, чтобы в первый блок выводился список стран, которые указаны в объекте;
2) При клике на блок страны должны вывестись блоки с названиями городов и их описаниями, которые указаны в объекте под каждой из стран;
3) Также при клике на блок города выводится список улиц указанных в объекте;
4) Ну и соответсвенно при клике на блок улицы, выводятся соответсвующие достопримечательности.
Вот сам объект. Понятное дело, что в будущем он может увеличиваться или уменьшаться в своих размерах. Хотя и сам объект в теории можно реализовать немного по другому.
var countries = {
'Russia': {
className: 'russia',
description: 'Russia, or the Russian Federation, is a country spanning Eastern Europe and Northern Asia.',
'Moscow': {
className: 'moscow',
description: 'Moscow is the capital and largest city of Russia.',
'Arbat': {
className: 'arbat',
description: 'Arbat Description',
'Museum of illusions': {
className: 'museumIllusions',
decription: 'Museum of illusions Description'
},
'Actors house': {
className: 'actorsHouse',
decription: 'Actors house Description'
},
'The Pushkin Museum': {
className: 'pushkin',
decription: 'The Pushkin Museum Description'
}
},
'Nikolskaya Street': {
className: 'nikolskaya',
description: 'Nikolskaya Street Description',
'Kazan Cathedral': {
className: 'kazanCathedral',
decription: 'Kazan Cathedral Description'
},
'The old Mint': {
className: 'oldMint',
decription: 'The old Mint Description'
}
}
},
'Saint Petersburg': {
className: 'petersburg',
description: 'Saint Petersburg, formerly known as Petrograd (1914–1924) and later Leningrad (1924–1991), is the second-largest city in Russia.',
'Malaya Sadovaya Street': {
className: 'sadovaya',
description: 'Malaya Sadovaya Street Description',
'The Ushakov House': {
className: 'ushakov',
description: 'The Ushakov House Description',
},
'Yeliseyev Merchants Store': {
className: 'yeliseyev',
description: 'Yeliseyev Merchants Store Description',
}
},
'Duma Street': {
className: 'duma',
description: 'Duma Street Description',
'Catherines Garden': {
className: 'catherinesGarden',
description: 'Catherines Garden Description',
}
},
'Liteyny Avenue': {
className: 'liteyny',
description: 'Liteyny Avenue Description',
'Pelya House': {
className: 'pelyaHouse',
description: 'The Pelya House is a historical building in the center of St. Petersburg at the address Liteyny Prospekt, 46.'
},
'Stieglitz Museum': {
className: 'stieglitzMuseum',
description: 'The Stieglitz Museum of Decorative and Applied Arts ranks among the most significant museums in Saint Petersburg, Russia.'
},
'The house of Princess Yusupova': {
className: 'yusupova',
description: 'The initial design of the building was developed by the architect Harald Bosse, then Ludwig Bonstedt completed the work on the project and supervised the construction.'
}
}
},
'Novgorod': {
className: 'novgorod',
description: 'Novgorod, also known as Novgorod the Great, or Novgorod Veliky, or just Novgorod, is one of the oldest historic cities of Russia, with more than 1,000 years of history.',
'Sofia Square': {
className: 'sofiaSquare',
description: 'Sofia Square Description',
'Museum of Fine Arts': {
className: 'fineArts',
description: 'Museum of Fine Arts Description',
},
'Hagia Sophia': {
className: 'hagiaSophia',
description: 'Hagia Sophia Description',
},
}
}
},
'Italy': {
className: 'italy',
description: 'Italy, officially the Italian Republic Italian: Repubblica Italiana is a country consisting of a peninsula delimited by the Alps and several islands surrounding it.',
'Rome': {
className: 'rome',
description: 'Rome Description',
'via Giulia': {
className: 'viaGiulia',
description: 'via Giulia Description',
'Sisto bridge': {
className: 'sistoBridge',
description: 'Sisto bridge Description',
},
'the Farnese mansion': {
className: 'farneseMansion',
description: 'Farnese mansion Description',
}
},
'via di Borgo Pio': {
className: 'viaUrbana',
description: 'via Urbana Description',
'St. Peters Cathedral': {
className: 'viaUrbana',
description: 'via Urbana Description',
}
}
},
'Florence': {
className: 'florence',
description: 'Florence Description',
'Piazza Duomo': {
className: 'piazzaDuomo',
description: 'Piazza Duomo Description',
'Cathedral Square': {
className: 'cathedralSquare',
description: 'Cathedral Square Description',
},
},
'Piazza della Signoria': {
className: 'signoria',
description: 'Piazza della Signoria Description',
'Palazzo Vecchio': {
className: 'palazzoVecchio',
description: 'Palazzo Vecchio Description',
},
}
},
},
'France': {
className: 'france',
description: 'France, officially the French Republic, is a country based in Western Europe, consisting of metropolitan France and several overseas regions and territories.',
'Paris': {
className: 'paris',
description: 'Paris Description',
'Champs-Elysees': {
className: 'champsElysees',
description: 'Champs-Elysees Description',
'Triumphal Gate': {
className: 'triumphalGate',
description: 'Triumphal Gate Description',
},
},
'Richelieu Street': {
className: 'richelieuStreet',
description: 'Richelieu Street Description',
'The Louvre': {
className: 'louvre',
description: 'The Louvre Description',
},
}
},
'Lyon': {
className: 'lyon',
description: 'Lyon Description',
'Presquile': {
className: 'presquile',
description: 'Presquile Description',
'Place Bellecour': {
className: 'placeBellecour',
description: 'Place Bellecour Description',
},
}
},
},
}
Я поначалу думал реализовать подобную идею по-другому, создав несколько отдельных массивов, которые будут привязаны к отдельным html элементам. Но честно признаться это все выглядело, как один большой костыль.
