Как создать ссылку, используя функцию щелчка, чтобы отобразить подконтент, состоящий из jQuery? - PullRequest
0 голосов
/ 24 июля 2011

HTML:

<div id="mainContent">
    <div class="photoShow"></div>
    <div class="photo_nav"></div>
</div>

<div class="photo_panels">
    <div class="photo_panel">
        <div class="photo_content"></div>
    </div>
    <div class="photo_panel">
        <div class="photo_content"></div>
    </div>
    <div class="photo_panel">
        <div class="photo_content"></div>
    </div>
</div>

JavaScript / jQuery:
Чтобы создать три ссылки для отображения «photo_content», в котором есть элемент DOM и ссылка на фотографию:

$('.photo_panels .photo_panel').each(function(index){
    $('.photo_nav').append('<a class = "photo_nav_item"></a>');
});

$('.photo_nav a.photo_nav_item').addClass('current');
// Set up Navigation Links
$('.photo_nav a.photo_nav_item').click(function(){
    var navClicked = $(this).index();
    var Photo = $('.photo_content').get(navClicked);

    $(".photo_nav a.photo_nav_item").removeClass('current');
    $(".photoShow").removeClass('current');
    $(this).addClass('selected');
    $(".photoShow").fadeIn('slow', 'swing');
    $(".photoShow").html(Photo);

Это хорошо только для двух кликов?Что не так с этим?Если я установлю код ниже, это работает, но я теряю функции jQuery содержимого:

    var newPhot = $(Photo).html() 
    $(".photoShow").html(newPhoto);

1 Ответ

0 голосов
/ 24 июля 2011
$('.photo_nav a.photo_nav_item').click(function(){...});

действует только для существующих a.photo_nav_items, поэтому, если вы создаете новые элементы, попробуйте

$('.photo_nav a.photo_nav_item').live('click', function(){...});

чтобы прикрепить обработчик событий к любому элементу с этим селектором, сейчас и в будущем.

...