使用JQuery

Question

我想知道我是否可以使用某个类或伪目标来定位div。 我认为答案可能是一些＆＃34; if else＆＃34;但我不知道该怎么做。

我正在处理某些表单，这些表单通过用户使用 continue 和 back 按钮导航的步骤显示。

＆＃34;步骤＆＃34;由ol li分隔。 在那之后，我有3＆＃34;按钮＆＃34;：返回，继续和发送。

<section class="modal-questions">
        <form id="form001" name="form001" method="post">
            <div class="modal-questions-list">
                <ol>
                    <!-- question 01 -->
                    <li class="li-visible">
                        <h4>Question 01</h4>
                        <input id="opt1a" type="radio" name="Q1" value="1">
                        <label for="opt1a">Options</label>
                    </li>

                    <!-- question 02 -->
                    <li>
                        <h4>Question 02</h4>
                        <input id="opt2b" type="radio" name="Q2" value="1">
                        <label for="opt2b">Options</label>
                    </li>

                    <!-- question 03 -->
                    <li>
                        <h4>Question 0</h4>
                        <input id="opt3b" type="radio" name="Q3" value="1">
                        <label for="opt3b">Options</label>
                    </li>

                    <!-- question 04 -->
                    <li>
                        <h4>Question 04</h4>
                        <input id="opt4b" type="radio" name="Q4" value="1">
                        <label for="opt4b">Options</label>
                    </li>
                </ol>
            </div>
        </form>
    </section>

    <section class="modal-bottom">
        <div class="X-button-flat" id="prevStep">
            Back
        </div>
        <br />
        <div class="X-button-small s-button-orange" id="nextStep">
            Continue
        </div>

        <div class="X-button-small s-button-orange" id="finalStep">
            Send
        </div>
    </section>

在CSS中，li被隐藏，但.li-visible除了 li { display: none; } .li-visible { display: block; } - 用户正在看到的那个。

removeClass('li-visible')

使用JQuery，当用户点击继续我li到拥有它的next时，将其添加到li一个以显示给它用户。当用户点击返回时，我会执行相同的操作，但前一个$('.modal-bottom').on('click', '#nextStep', function() { $('li.li-visible').removeClass('li-visible').next().addClass('li-visible'); $('#prevStep').css({'opacity':'1'}); }); $('.modal-bottom').on('click', '#prevStep', function() { $('li.li-visible').removeClass('li-visible').prev().addClass('li-visible'); }); 。

CGImageRef processedCGImage = [_context createCGImage:ciImage
                                                             fromRect:[ciImage extent]];

到目前为止一切顺利。现在的问题是：

1. 当用户在点击 continue 时到达最后一个问题时，我想隐藏该按钮并显示发送按钮。

2. 当用户在第二个问题中点击返回时，我想隐藏该按钮。

P.S。
在这个例子中有4个问题，但表格没有固定数量的问题，所以它必须在3或99个问题中工作。

有JSfiddle

Answer 1

您可以使用:first-child和:last-child选择器

$('#prevStep, #finalStep').hide();

$('.modal-bottom').on('click', '#nextStep', function() {
    var i = $('li.li-visible').removeClass('li-visible').next().addClass('li-visible');
    if(i.is(':last-child')){
        $(this).hide();
        $('#finalStep').show();
    }
    $('#prevStep').show();
});

$('.modal-bottom').on('click', '#prevStep', function() {
    var i = $('li.li-visible').removeClass('li-visible').prev().addClass('li-visible');
    if(!i.is(':last-child')){
        $('#nextStep').show();
        $('#finalStep').hide();
    }
    if(i.is(':first-child')){
        $(this).hide();
    }
});

（注意：我使用.hide()和.show()方法代替.css(...)）

JSFiddle demo

或者更紧凑的解决方案，.toggle(display)：

$('.modal-bottom').on('click', '#nextStep', function() {
    var i = $('.li-visible').removeClass('li-visible').next().addClass('li-visible').is(':last-child');
    $(this).toggle(!i);
    $('#finalStep').toggle(i);
    $('#prevStep').show();
});

$('.modal-bottom').on('click', '#prevStep', function() {
    var i = $('.li-visible').removeClass('li-visible').prev().addClass('li-visible').is(':last-child');
    $('#nextStep').toggle(!i);
    $('#finalStep').toggle(i);
    $(this).toggle(!$('li.li-visible').is(':first-child'));
});

JSFiddle demo