FadeTo несколько разных изображений

Question

Я очень новичок в веб-дизайне и JQuery · Я пытаюсь использовать FadeTo с 13 различными изображениями, которые каждый из них отображают в текстовом поле, когда вы нажимаете на них. Например, фотография под названием «Пинхол» создаст текст о создании камеры-обскуры, тот, который называется «обскура», сделает текст о обскуре камеры и т. Д.

По какой-то причине я не могу заставить работать. Я пробовал разные вещи, но либо все они будут исчезать одновременно, либо никто из них не будет работать так, как сейчас, или я получу сообщение об ошибке. Вот моя попытка:

$(document).ready(function(){ 

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){ 

    $(pinhole).fadeTo('slow',0.5); 
    }, function(){ 
    $(pinholeText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(obscura).fadeTo('slow',0.5); 
    }, function(){ 
    $(obscuraText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(heliography).fadeTo('slow',0.5); 
    }, function(){ 
    $(heliographyText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(daguerreotype).fadeTo('slow',0.5); 
    }, function(){ 
    $(daguerreotypeText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(calotype).fadeTo('slow',0.5); 
    }, function(){ 
    $(calotypeText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(wetc).fadeTo('slow',0.5); 
    }, function(){ 
    $(wetcText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(drygel).fadeTo('slow',0.5); 
    }, function(){ 
    $(drygelText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(kodak1).fadeTo('slow',0.5); 
    }, function(){ 
    $(kodak1Text).stop().fadeTo('slow',1); 
    } 
    ); 

    $(leica2).fadeTo('slow',0.5); 
    }, function(){ 
    $(leica2Text).stop().fadeTo('slow',1); 
    } 
    ); 

    $(polaroid).fadeTo('slow',0.5); 
    }, function(){ 
    $(polaroidText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(dslr).fadeTo('slow',0.5); 
    }, function(){ 
    $(dslrText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(cellphone).fadeTo('slow',0.5); 
    }, function(){ 
    $(cellphoneText).stop().fadeTo('slow',1); 
    } 
    ); 

    $(future).fadeTo('slow',0.5); 
    }, function(){ 
    $(futureText).stop().fadeTo('slow',1); 
    } 
    ); 

}); 

Я пробовал несколько учебников, но никто из них не работал. Может кто-нибудь, пожалуйста, дайте мне подсказку? Это было бы очень признательно!

Answer 1

Поскольку вы обрабатываете событие click() с multiple selectors, вам нужно проверить, какой из них щелкнуть, а затем указать соответствующий текст.

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){ 

    $(this).fadeTo('slow',0.5); 

    if($(this).is('#pinhole')){ 
     $('#pinholeText').fadeTo('slow',1); 
    } 

    if($(this).is('#obscura')){ 
     $('#obscuraText').fadeTo('slow',1); 
    } 
    //and so on... 
}); 

Но это было бы неэффективно, потому что это похоже на это делать один за другим:

$('#pinhole').click(function(){ 
    $(this).fadeTo('slow',0.5); 
    $('#pinholeText').fadeTo('slow',1); 
}); 

$('#obscura').click(function(){ 
    $(this).fadeTo('slow',0.5); 
    $('#obscuraText').fadeTo('slow',1); 
}); 

Однако, если вы можете изменить разметку и обернуть набор img и text в <div>. Как это:

<div id="pinhole"> 
    <img id="pinholeImg" src="" /> 
    <p id="pinholeText">Pinhole text</p> 
</div> 

Тогда ваш Jquery будет:

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){ 
    $(this).children('img').fadeTo('slow',0.5).siblings('p').fadeTo('slow',1); 
}); 

Смотреть это jsfiddle