Я использую карусель jQuery для создания анимированного логотипа на своем сайте - я хочу, чтобы содержимое менялось при нажатии на каждый элемент, что-то вроде этого:
http://fredhq.com/projects/roundabout/demo/images/
Я уже внедрил JS на этой странице, которая работает нормально, но мне было интересно, как лучше всего сделать еще одно изменение div на стороне? У меня проблема в том, что скрипт использует строковые значения в массиве, в то время как я, вероятно, хочу создать различные скрытые элементы div и показать / скрыть в зависимости от элемента, на который нажали.
Простой пример:
<img id="blue" src="triangle_blue.png">
<img id="aqua" src="triangle_aqua.png">
<span id="item-title"></span>
<div id="bluepanel">
Content here
</div>
<div id="aquapanel">
Content here
</div>
Вот JS:
$(document).ready(function(){
var titles = {
blue: 'Superior Service',
aqua: 'Bill Checking & Validation'
};
$('img').focus(function()
{
var useText = (typeof titles[$(this).attr('id')] != 'undefined') ? titles[$(this).attr('id')] : '';
$('#item-title').html(useText).fadeIn(200);
}).blur(function() {
$('#item-title').fadeOut(100);
});
Итак, вы можете видеть, что скрипт изменил содержимое item-title на основе ключа массива title, что я также хотел бы сделать, это показать aquapanel, когда аква находится в фокусе, и, очевидно, скрыть все остальные элементы (в реальном примере их больше 1).
Мои знания javascript на самом деле сводят меня к следующему:
$('#aqua').focus(function(){
$('#bluepanel').hide();
$('#aquapanel').show();
});
И я понимаю, что это невероятно не элегантно и неэффективно, учитывая, что в списке 8 или несколько элементов. Так есть ли способ создать массив разделенных идентификаторов и показать выбранный, скрывая все остальные в этом массиве?
Надеюсь, я дал это понять, и любая помощь очень ценится.