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

2024年1月26日 150次阅读

我想知道我是否可以使用某些类或伪目标来定位div.

我认为答案可能是“如果不是”,但我不知道该怎么做.

我正在处理一些表单,这些表单通过用户使用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,并将其添加到下一个以向用户显示.当用户点击回来时,我会做同样的事情,但是对于之前的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');
});

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

>当用户在点击继续时到达最后一个问题时,我想隐藏该按钮并显示发送按钮.
>当用户在第二个问题中单击时,我想隐藏该按钮.

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

有JSfiddle

最佳答案 您可以使用
: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

点赞