Изменение атрибута <img>src при изменении класса контейнера <a> - PullRequest
Новая
       13

Изменение атрибута <img>src при изменении класса контейнера <a>

3 голосов
/ 03 апреля 2012

Я использую NivoSlider в одном из моих проектов, этот конкретный клиент запросил изменение активного эскиза изображения в зависимости от показанного слайда.Я просмотрел документацию и не могу найти ничего об изменении самого изображения, поэтому я думаю, что лучший вариант - это изменить само изображение с помощью функции Jquery.Несмотря на это, я застрял на том, как этого добиться.

NivoSlider создает этот HTML-код: 

<div class="nivo-controlNav">
    // Active Thumbnail Link
    <a class="nivo-control active" rel="0">
        <img alt="" src="images/inactive_wedge.png">
    </a>
    // Inactive Thumbnail Link
    <a class="nivo-control" rel="1">
        <img alt="" src="images/inactive_wedge.png">
    </a>
</div>

Плагин добавляет класс active к <a> дляслайд изображения, который показывает.

Я пытаюсь изменить содержащий атрибут <img> source для отображения 'active_wedge.png', когда класс active применяется к тегу <a>.

Как бы я достиг этого с Jquery?(В такие времена я понимаю, как мало я знаю!)

Я пробовал что-то вроде этого: 

if ($('.nivo-control').hasClass('active')) {
    // Not really sure what to put here at all
}

Это правильно, или я плохо к этому подхожу?

Заранее спасибо.

Дополнительные JS: 

$(window).load(function() {
    $('#theslides').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 500, // Slide transition speed
        pauseTime: 3500, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: true, // Use image rel for thumbs
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){
            // Putting code to change the thumbnail image in here
            if ($('.nivo-control').hasClass('active')) {
                $('.nivo-control .active img').attr('src','images/active_wedge.png');
            }
        }, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Ответы [ 2 ]

2 голосов
/ 03 апреля 2012

без использования, если hasclass просто: 

   $('.nivo-control.active img').attr('src','images/active_wedge.png')
1 голос
/ 03 апреля 2012 
if ($('.nivo-control').hasClass('active')) {
   $(this).find('img').attr('src','yourSOURCE')
}
...