Jquery 클래스 표시 여부 필드 입력 필드

Question

시작하기 전에 jquery를 처음 사용했지만 익숙한 모든 것을 배웠습니다.

특정 입력에 값이 있거나 특정 확인란이 선택되어있는 경우에만 표시되는 여러 숨겨진 div가있는 큰 양식이 있습니다. 각 div에는 "start-hidden"이라는 클래스가 있습니다.이 클래스는 처음에는 모든 div가 페이지로드시 숨겨집니다.

체크 박스와 입력란의 모든 값은 데이터베이스에 저장되며 누군가가 양식을 업데이트하기 위해 돌아 오면 표시되어야하는 div를 올바르게 "보여줍니다" 값 또는 특정 수표가있는 것).

확인해야하는 각 필드에 대해 특정 "if 문"을 작성하는 대신 "시작 숨김"클래스가있는 div 내의 모든 입력을 검사 할 수 있으며 입력이 비어 있지 않으면 특정 div가 표시됩니다.

몇 가지 조사를 해보니 다음 코드를 시도했지만 완전히 벗어났다는 느낌이 들었습니다. 또한

var inp = $(".start-hidden input").val(); 
    if(jQuery.trim(inp).length > 0){$(this).show();} 

, 때로는 "시작 - 숨겨진"사업부가있을 수 있습니다 또 다른 '시작 - 숨겨진 "그것은 내 사업부, 나는이 중첩 된 숨겨진 사업부 것 같아요,하지만 난 확인해야 그것은 단지 부모가 열립니다 div.

누군가가 이해하기를 바랍니다.

미리 감사드립니다.

Answer 1

이 시도 :

$(".start-hidden").each(function(){ 
    if($.trim($(this).find(":text").val()).length > 0 || $(this).find(":checked").length > 0){ 
     $(this).show(); 
    } 
}); 

Answer 2

을 어쩌면 내가이야 오버 생각 Cybermate의 대답은 너무 짧고 달콤한하지만 난 질문을 이해하는 방식은 내가 필요 이상 응답이 생각하기 때문에이 ...

먼저 선택자을보아야합니다. 입력에 사용해야하며 반드시 DIVS는 아닐 수도 있습니다. 나는 모든 입력/체크 박스에서 공통 클래스를 사용하여 무언가를하고 싶습니다.

$(".toggler").each(....); 

다음으로 입력을 DIVS에 연결하는 방법이 필요합니다. 나는 대개 유사한 ID 속성을 사용하여이 작업을 수행합니다.

<input id="name" type="text" class="formInput toggler" /> 
<div id="name1">Instructions for Name here</div> 

는 그런 다음 이벤트가 발생 할 때 DIV를 전환 할 수 있도록 바인드 이벤트 할 수있는 방법을 찾아야합니다. 이 경우 입력과 체크 박스가 모두 있습니다. 이 두 가지는 다르며 체크 박스가 선택되었는지 여부를 테스트하려는 체크 박스에 대해 .val()을 검사하는 대신에. 값이 설정되어 있는지 또는 체크 박스가 선택되었는지 확인하면 div를 표시하려고합니다.

$(".toggler").each(function() { 
    var me = $(this); 
    var myId = me.attr("id"); 
    var myDivId = "#"+myId+"1"; 

    if(me.is(":checkbox")) { 
     //check the initial state of the checkbox 
     if(me.is(":checked")) $(myDivId).show(); 

     // show/hide the div on clicking 
     $("#"+myId).live('click', function() { 
      $(myDivId).toggle(); 
     }); 
    } else { 
     // check the initial state of the input 
     if($.trim(me.val().length) > 0) { 
      $(myDivId).toggle(); 
     } 

     // if the state changes show the div 
     $("#"+myId).live('change', function() { 
      if($.trim($(this).val().length) > 0) { 
       $(myDivId).show(); 
      } else { 
       $(myDivId).hide(); 
      } 
     }); 
    } 
}); 

여기에 당신도 당신의 HTML의 조각을 게시 할 수 있다면 도움이 될 미래의 작업 jsfiddle