javascript - 使用 JQuery 使用 css 属性定位某些 div/li

Question

我想知道我是否可以将 div 定位为某个类或伪类。 我认为答案可能是一些“if else”，但我不确定该怎么做。

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

“步骤”由ol li 分隔。 之后，我有 3 个“按钮”:back、continue 和 send。

<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，当用户单击 continue 时，我将 removeClass('li-visible') 添加到包含它的 li 中，然后添加它到 下一个 显示给用户。当用户单击 back 时，我会执行相同的操作，但会返回到之前的 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. 当用户点击 continue 到达最后一个问题时，我想隐藏该按钮并显示 send 按钮。

   <

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

附言
在这个例子中有 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