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

Question

我正在创建一个页面，您可以在其中选择带有复选框的三明治浇头，然后单击提交后，将显示包含图像的三明治选项 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();              
    });
});

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