Проблема с переключателем bxSlider

Я использую bxSlider для слайдов набора на основе некоторых вопросов. Я использую переключатели, чтобы вызвать следующее действие.

Проблема в том, что переключатель не переключает div's со второго слайда и далее. Он отлично работает на первом слайде.

Создал jsFiddle для демонстрации проблемы - демонстрация jsFiddle. Выберите «да» для первого вопроса, и появится текст ответа. Это не для второго и так далее...

Любая помощь приветствуется.

Код ниже...

HTML

<div class="slider">
    <ul id="sample">
        <li>
            <div class="questions">
                Question 1<br />
                <p>
                    <label><input type="radio" name="q1" class="noAction" />No</label>
                    <label><input type="radio" name="q1" class="yesAction" />Yes</label>
                </p>
            </div>
            <div class="actions">
                <div id="noAction" style="display: none;">
                    <p>Thank you.</p>
                </div>
                <div id="yesAction" style="display: none;"><a href="" id="go-next1">Go to Question 2</a></div>
            </div>
        </li>
        <li>
            <div class="questions">
                Question 2<br />
                <p>
                    <label><input type="radio" name="q2" class="noAction1" />No</label>
                    <label><input type="radio" name="q2" class="yesAction1" />Yes</label>
                </p>
            </div>
            <div class="actions">
                <div id="noAction1" style="display: none;">
                    <p>Thank you.</p>
                </div>
                <div id="yesAction1" style="display: none;"><a href="" id="go-next2">Go to Question 3</a></div>
            </div>
        </li>        
    </ul>
</div>​

JQuery

    $(function() {
        var slider = $('#sample').bxSlider({
          infiniteLoop: false,
          controls: false
        });

        $('#go-next1').click(function(){
          slider.goToNextSlide();
          return false;
        });

        $('#go-next2').click(function(){
          slider.goToNextSlide();
          return false;
        });

        $(':radio').change(function() {
          var item = '#' + $(this).attr('class');
          $(item).toggle();
        });

    });​

Спасибо.


person neo108    schedule 20.07.2012    source источник


Ответы (1)


Очень странно... Проблема возникает на последнем слайде. Я нашел обходной путь, просто переместите div class="actions" за пределы тега ul, и он работает.

См. изменения в разветвленном демо jsFiddle

person Corinne Kubler    schedule 20.07.2012
comment
Спасибо @Corinnekm. Да, поведение очень странное. Я пытаюсь заставить его работать, не перемещая div действий за пределы ul. Должно быть что-то происходит с bxSlider, что вызывает это. - person neo108; 21.07.2012
comment
Я столкнулся с той же проблемой. Не могли бы вы посоветовать решение? - person Ragesh S; 30.05.2016