확인란을 선택하면 Jquery, show 및 div divs가 표시됩니다.

Question

샌드 박스 토핑을 선택하는 페이지를 만들고 체크 박스를 클릭하면 제출 한 샌드위치 옵션 div가 표시됩니다. 기본적으로 모두 숨겨져 있습니다. 나는 토핑의 나머지 부분이 첫 번째 레이어의 맨 위에있는 동안 쇼가 고정되는 첫 번째 div를 원한다. 나는 당신이 아래로 스크롤하는 동안 토핑이 이전 토핑 위로 움직이는 것처럼 보이도록 결국 설정합니다. 따라서 베이글 바닥과 베이컨을 선택하면 아래로 스크롤하여 베이글 바닥을보고 베이글이 베이글 바닥 위로 올라갈 때까지 계속 스크롤합니다.

HTML 순서의 첫 번째 토핑 div는 베이글 하단입니다.하지만 "베이컨"을 선택하더라도 베이글 하단 만 표시됩니다. 당신이 그들 모두를 확인해야하므로, 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와 클래스 선택기 클래스 내의 모든 객체의 배열을 반환합니다

내가 여기 jsfiddle 있습니다. 다음은 고정 된 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();    
    }); 
}); 

그러면 제출 버턴을 제거 할 수 있습니다.