체크 박스 값을 기반으로 독립적으로 여러 div 클래스 표시/숨기기

Question

몇 가지 질문을 광산과 비슷하게 보았지만 해결 방법을 찾을 수 없습니다.

저는 Google XML URL을 사용하여 FullCalendar에서 제공되는 JavaScript로 캘린더 작업을하고 있습니다. 내 목표는 달력의 이벤트에 해당하는 확인란 값을 기반으로 달력의 이벤트를 표시하거나 숨기는 것입니다. 이러한 이벤트는 유형별로 그룹화되며 별도의 XML URL을 사용하는 별도의 Google 캘린더에 있지만 웹 페이지의 동일한 캘린더 표시에 렌더링되며 div 클래스 이름이 다릅니다. 나는 총 11 개의 클래스를 가지고 있으며 체크 박스 값을 기반으로 다른 클래스와 독립적으로 그들의 가시성을 토글하는 방법이 필요하다.

저는 JQuery/JavaScript를 배우는 중이므로 많은 부분이 여전히 그리스어입니다. 단일 클래스에서 작동하는 솔루션을 찾았지만 다른 확인란이있는 경우 다른 모든 확인란의 값에 종속됩니다.

<script type="text/javascript"> 
function doInputs(obj){ 
var checkbox = $("input[type=checkbox]:checked"); 
var i =0, box; 
$('.className').fadeOut('fast'); 
    while(box = checkbox[i++]){ 
    if(!box.checked)continue; 
    $('.className').fadeIn('fast'); 
    break; 
    } 
} 
</script> 

그리고 해당 마크 업 : 이것은 내가 현재 사용하고 JS입니다이 아주 잘 작동

<input type="checkbox" checked="checked" name="className" onclick="doInputs(this)"> Class Name Text 

; 그러나, 나는 여러 div 클래스와 함께 작동하게 만드는 방법을 알아낼 수 없습니다. 어떤 제안?

Answer 1

내가 훨씬 더 잘 작동하고 기존 FullCalendar JS 작업을 사용하는 다른 솔루션을 찾을 전환 할 수 있습니다. div 클래스와 클래스 이름을 표시 상태의 결정 요인으로 사용하는 대신 FullCalendar의 removeEventSource 및 addEventSource 액션을 사용하여 전환 된 11 개의 캘린더 각각을 표시하거나 숨 깁니다.

원본 JS는 here입니다. 좀 더 피킹과 나는 이것을 훨씬 빨리 발견했을 것이다.

댓글을 달고 답변 한 사람들에게 감사드립니다.

Answer 2

div 함수의 클래스 이름을 JS 함수와 함께 전달할 수 있습니다.

doInputs(this,'classname') 

그 클래스 이름에 따라 해당 클래스

예컨대

function doInputs(obj,cc){ 
...... 
$('.' + cc).fadeOut('fast'); 
...... 
}