У меня есть вертикальная панель задач, содержащая несколько строк/кнопок (каждая из классов.slidebar и разных идентификаторов #start, #sprache, #modus и т.д.). Когда я наводил курсор на каждую строку/кнопку, должно появляться другое всплывающее меню (например, #start_fly для кнопки #start). К сожалению, этого не происходит. Я предполагаю, что, поскольку я пытаюсь применить функции к строковым переменным, например:
flyout_id = "$('#"+id_name+"')"; //$('#start_fly')
flyout_id.css({//some code
});
Это полный код:
$(document).ready(function () {
$('.slidebar').each(function () {
var startOffset = $(this).position();
var ID = $(this).attr('id');
var id_name, flyout_id;
switch (ID) {
case 'start':
id_name = "start_fly";
break;
case 'sprache':
id_name = "sprache";
break;
case 'modus':
id_name = "modus_fly";
break;
case 'teilen':
id_name = "teilen_fly";
break;
case 'info':
id_name = "info_fly";
break;
}
flyout_id = "$('#" + id_name + "')"; //$('#start_fly') in 1. case 'start'
$(this).bind({
mouseenter: function () {
flyout_id.css({
position: 'fixed',
top: startOffset.top + 8,
left: $(this).offset().left - flyout_id.width()
});
flyout_id.show();
},
mouseleave: function () {
flyout_id.hide();
}
});
flyout_id.bind({
mouseleave: function () {
$(this).hide();
},
mouseenter: function () {
$(this).show();
}
});
});
});
Это строка:
flyout_id = "$('#"+id_name+"')";
То, что вы, по-видимому, хотели сделать, это создать объект jQuery:
flyout_id = $("#"+id_name);
Также обратите внимание, так как все ваши операторы switch добавляют "_fly" в конец ID
(за исключением случая sprache
), вы можете заменить его просто:
id_name = ID;
if (ID !== "sprache") {
id_name = ID + "_fly";
}
flyout_id = $('#' + id_name);