javascript - 选中复选框时的 Jquery、显示和图层 div

Question

我正在制作一个页面，您可以在其中选择带有复选框的三明治浇头，在您单击提交后，将显示包含图像的三明治选项 div。默认情况下它们都是隐藏的。我希望显示的第一个 div 固定，而其余的浇头层位于第一个 div 之上。我最终会设置它，这样当你向下滚动时，浇头似乎会向上移动并超过之前的浇头。因此，如果您选择百吉饼底部和培根，则向下滚动以查看百吉饼底部并继续滚动以使培根向上移动到百吉饼底部的顶部。

HTML 顺序中的第一个顶部 div 是 bagel-bottom，但即使我选择“bacon”，唯一显示的 div 是 bagel-bottom。

我这里有 jsfiddle:http://jsfiddle.net/3kgnkh4w/

$(document).ready(function() {
    $('#sandwich-option-submit').click(function() {
        var checkedTopping = $('.sandwich-option').val();
        var divCheckedTopping = $('#'+ checkedTopping);
        var optionsContainer = $('#sandwich-selection-container');
            if($('.sandwich-option').is(':checked')) {
                $(divCheckedTopping).show().addClass('display');
                $(divCheckedTopping).eq(0).addClass('first-checked-topping');
            } else {
                $(divCheckedTopping).hide();
            };

    });

});

Answer 1

jQuery 类选择器返回该类中所有对象的数组，因此您需要检查所有对象。这是固定的 jQuery:

$(document).ready(function() {
$('#sandwich-option-submit').on("click", function() {
    var checkedToppings = $('.sandwich-option');
    for(var i = 0; i < checkedToppings.length; i++){
        var checkedTopping = $(checkedToppings[i]);
        var checkedToppingVal = $(checkedTopping).val();
        var divCheckedTopping = $('#' + checkedToppingVal);
        var optionsContainer = $('#sandwich-selection-container');
        if($(checkedTopping).is(':checked')) {
            $(divCheckedTopping).show().addClass('display');
            $(divCheckedTopping).eq(0).addClass('first-checked-topping');
        } else {
            $(divCheckedTopping).hide();
        }
    }       
});

});

或者，您可以使用在 hide() 和 show() 方法之间切换的 toggle() jQuery 函数，在检查时显示每个浇头。下面是代码:

$(document).ready(function() {
    $('.sandwich-option').on("click", function() {
        var checkedToppingVal = $(this).val();
        var divCheckedTopping = $('#' + checkedToppingVal);
        $(divCheckedTopping).toggle();              
    });
});

然后您可以删除提交按钮。