Javascript 使用JQuery将css属性指向特定的div/li

我想知道我是否可以将某个类或伪类作为

div

的目标。 我想答案可能是一些“

，如果有的话”

，但我不知道该怎么做

我正在处理一些表单，这些表单由用户使用“继续”和“返回”按钮导航的步骤显示

“步骤”由

ol li

分隔。 之后，我有3个“按钮”：返回、继续和发送

使用JQuery，当用户单击continue I

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个问题

您可以使用和选择器

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

（注意：我使用了和方法，而不是
.css（…）
）



或者更紧凑的解决方案，包括：

非常感谢您！“！”是什么意思？它像css中的“！important”吗？@SandrinaPereira，不，
此处用于其他内容（确定条件是否为
falsy
）。您可能会考虑适当的按钮而不是div。
$('.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');
});

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

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