1

我正在使用 bxSlider 根据一些问题滑动一组幻灯片。我正在使用单选按钮来触发下一个动作。

问题是单选按钮不会div's从第二张幻灯片开始切换。它在第一张幻灯片中运行良好。

创建了一个 jsFiddle 来演示问题 - jsFiddle Demo。为第一个问题选择是,然后出现响应文本。它不是第二个等等......

任何帮助是极大的赞赏。

下面的代码...

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();
        });

    });​

谢谢你。

4

1 回答 1

1

很奇怪……问题出现在最后一张幻灯片上。我找到了一个解决方法,只需将 div class="actions" 移到 ul 标签之外,它就可以工作。

查看jsFiddle demo forked上的修改

于 2012-07-20T06:08:55.770 回答