当他们的复选框被选中时，jquery，显示和图层div

Question

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

HTML顺序中的第一个顶部div是百吉饼底，但即使我选择“培根”，显示的唯一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的类选择返回类中的所有对象的数组，所以你需要检查所有的人。这里是固定的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();    
    }); 
}); 

然后，您可以删除提交buttton。