使用JQuery使用css属性定位某个div / li

Question

我想知道我是否可以使用某些类或伪目标来定位div 。 我认为答案可能是“ if else ”，但我不知道该怎么做。

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

“步骤”由ol li分隔。 在那之后，我有3个“按钮”： 返回 ， 继续并发送 。

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

使用JQuery，当用户单击继续时，我将removeClass('li-visible')删除到包含它的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');
});

到现在为止还挺好。 现在的问题：

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

2. 当用户点击后面的第二个问题，我想隐藏按钮。

PS
在这个例子中有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演示

---

或者更紧凑的解决方案，使用.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演示