Вид для печати
Добрый день.
Подскажите как реализовать данные функции на JQuery:
1. При нажатии на город меняется фон на фото нажатого города.
2. Меняется блок со спикером нажатого города.
Как реализовать для единичного случая (т.е. для класса ссылки города) понимаю, но не хочется прописывать для каждого класса т.к. городов много.
Можно ли реализовать проще?
С JQuery на вы, не пинайте сильно ))
Заранее спасибо за подсказки!
http://timaschuk.com/screen.png
Я бы делал примерно вот так
<body>
<div id="sidebar"></div>
<div id="speaker"></div>
<script>
(function(){
var data = [
{name: "Moscow", id: "moscow", image: "images/city/moscow.jpg", speaker: "images/speaker/moscow.jpg"},
{name: "Казань", id: "kazan", image: "images/city/kazan.jpg", speaker: "images/speaker/kazan.jpg"},
....
]
var speaker = document.getElementById('speaker');
var sidebar= document.getElementById('sidebar');
data.forEach(function(item){
var checkbox = document.createElemement('input');
checkbox.type = "ckeckbox";
checkbox.checked = false;
checkbox.onchange = function(){
if(checkbox.checked) {
document.body.style.backgound = item.image;
speaker.style.background = item.speaker;
}
}
checkbox.id = item.id;
var label = document.createElement('label');
label['for'] = item.id;
label.appendChild(checkbox);
var text = document.createTextNode(item.name);
label.appendChild(text);
sidebar.appendChild(label);
});
})()
</script>
</body>