Javascript 选中复选框时的Jquery、show和layer div

我正在制作一个页面，在该页面中，您可以通过复选框选择三明治浇头，然后单击“提交”后，将显示包含图像的三明治选项div。默认情况下，它们都是隐藏的。我希望显示的第一个div是固定的，而其余的浇头层位于第一个div的顶部。我最终会设置它，这样当你向下滚动时，浇头看起来会向上移动并覆盖上一个浇头。因此，如果选择bagel bottom和bacon，则向下滚动可看到一个bagel bottom，并保持滚动以使bagel bottom在bagel bottom顶部向上移动

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

我这里有JSFIDLE：

---

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

---

然后可以删除submit Button

为了获得已选中的复选框：Kahjav，谢谢你，这成功了！我正试图让每一层顶部都覆盖在另一层上，类似于这样：下面是我的修订版JSFIDLE，试图做类似的事情：

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

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