Три биографические анкеты с фотографиями


Я разработчика iPhone в основном, и я очень новой для веб-разработки, особенно в jQuery.

Моя задача: у меня есть три ДИВС, каждый из которых содержит краткую биографию об одном человеке. (У меня трое: Лиз, Крис и Майкл). Те ДИВС скрыты в начале моего кода, потому что все они относятся к классу профилей.

У меня есть три картинки, которые появляются на протяжении, и имеют идентификаторы: (lizIMG, chrisIMG, michaelIMG). При нажатии на изображение, любой другой биографии' ДИВС должны быть скрыты, и некоторые биографии div должны быть показаны.

Кроме того, у меня есть подсказки над каждым изображением, если див скрыт, он будет говорить:

(Имя человека) - Нажмите, чтобы узнать больше

Если отображается див, он скажет:

(Имя человека) - Нажмите, чтобы скрыть

У меня есть полностью рабочий код, но код слишком длинный для решения поставленной задачи. Это очень раздражает, потому что я точно знаю, как я мог сделать это в Objective-C, но не в jQuery. Я предполагаю, что рефакторинг она будет включать функции, и, возможно, массивы?

Я хотел бы сделать это короче.

$(document).ready(function() {
  $('div.profile').hide(); // Hide all the profiles
  $('#lizIMG').click(function() {
    if ($("#lizDiv").is(":visible")) {
        $('#lizTip').text('Click to learn more');
    }
    else {
        $('#lizTip').text('Click to hide');
    }   
    $('#lizDiv').slideToggle('slow');
    $('#chrisDiv').hide('slow');
    $('#chrisTip').text('Click to learn more');
    $('#michaelDiv').hide('slow');
    $('#michaelTip').text('Click to learn more');
});
$('#chrisIMG').click(function() {
    if ($("#chrisDiv").is(":visible")) {
        $('#chrisTip').text('Click to learn more');
    }
    else {
        $('#chrisTip').text('Click to hide');
    }   
    $('#chrisDiv').slideToggle('slow');
    $('#lizDiv').hide('slow');
    $('#lizTip').text('Click to learn more');
    $('#michaelDiv').hide('slow');
    $('#michaelTip').text('Click to learn more');
});
$('#michaelIMG').click(function() {
    $('#lizDiv').hide('slow');
    $('#lizTip').text('Click to learn more');
    $('#chrisDiv').hide('slow');
    $('#chrisTip').text('Click to learn more');
    if ($("#michaelDiv").is(":visible")) {
        $('#michaelTip').text('Click to learn more');
    }
    else {
        $('#michaelTip').text('Click to hide');
    }   
    $('#michaelDiv').slideToggle('slow');
});
$("#profiles img[title]").tooltip(); // Used to set text for the tooltips
});


301
2
задан 15 августа 2011 в 03:08 Источник Поделиться
Комментарии
1 ответ

Посмотрите на jQuery аккордеон

Или если вы не хотите использовать на гармони, то вот вариант:

function imgClickHandler(divBiographyId, divTooltipId){ 
var divBiographySelector = "#" + divBiographyId;
var divTooltipSelector = "#" + divTooltipId;
if ($(divBiographySelector).is(":visible")) {
$(divTooltipSelector).text('Click to learn more');
}
else {
$(divTooltipSelector).text('Click to hide');
}
$(divBiographySelector).slideToggle('slow');

//.profileBiography - this css class you should add to lizDiv, chrisDiv, michaelDiv
//.profileTip - this css class you should add to lizTip, chrisTip, michaelTip
$(".profileBiography").not(divBiographySelector).hide('slow');
$(".profileTip").not(divTooltipSelector).text('Click to learn more');
}

$(document).ready(function() {
$('div.profile').hide(); // Hide all the profiles
var profiles = [{img: "lizIMG", biography: "lizDiv", tooltip: "lizTip"},
{img: "chrisIMG", biography: "chrisDiv", tooltip: "chrisTip"},
{img: "michaelIMG", biography: "michaelDiv", tooltip: "michaelTip"}];

$.each(profiles, function(){
var biographyId = this.biography;
var tooltipId = this.tooltip;
$("#" + this.img).click(function(){
imgClickHandler(biographyId, tooltipId);
});
});
}

3
ответ дан 15 августа 2011 в 04:08 Источник Поделиться