Jquery，选中复选框时显示和分层 div

Question

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

HTML 订单中的第一个浇头 div 是百吉饼底，但即使我 select "bacon" 显示的唯一 div 是百吉饼底。

我这里有 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 class 选择器 returns class 中所有对象的数组，因此您需要检查所有对象。这是固定的 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();
        }
    }       
});

});

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

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

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

Jquery，选中复选框时显示和分层 div

Jquery, show and layer divs when their checkboxs are selected

javascript

css

checkbox

jquery

show-hide