Jquery select 양식 항목의 ID 증가시키기

Question

각 필드 래퍼에 여러 값 필드 세트가있는 양식이 있고 내부 div는 ID가 1로 증가하여 ID를 구분합니다. 개별 필드 집합 내의 확인란 양식 항목에 체크 박스가 선택되어 있으면 해당 필드 집합 내에있는 양식 항목을 감싸는 div를 숨겨야합니다. 문제는 ID의 이름이 문자열 중간에 고유 한 값을 포함한다는 것입니다. 예 : "# beginningofIDSting- X -endofStringName". ID를 변경하거나 클래스를 래퍼에 추가 할 수 없습니다.

<div id="edit-field-gallery-images-0-ahah-wrapper"> 
<div id="edit-field-gallery-images-0-data-revise-wrapper" class="form-item"> 
<label class="option" for="edit-field-gallery-images-0-data-revise"> 
<input id="edit-field-gallery-images-0-data-revise" 
class="form-checkbox revise-check" 
type="checkbox" checked="checked" 
value="1" name="field_gallery_images[0][data][revise]"> 
Revise This Description 
</label> 
</div> 

<div id="edit-field-gallery-images-0-data-revisedby-wrapper" class="form-item"> 
//Stuff in Here 
</div> 

<div id="edit-field-gallery-images-0-data-revisedon-wrapper" class="form-item"> 
//Stuff in Here 
</div> 
</div>//End #edit-field-gallery-images-0-data-revisedby-wrapper 

<div id="edit-field-gallery-images-1-ahah-wrapper"> 
<div id="edit-field-gallery-images-1-data-revise-wrapper" class="form-item"> 
<label class="option" for="edit-field-gallery-images-1-data-revise"> 
<input id="edit-field-gallery-images-1-data-revise" 
class="form-checkbox revise-check" 
type="checkbox" checked="checked" 
value="0" name="field_gallery_images[1][data][revise]"> 
Revise This Description 
</label> 
</div> 
//Stuff in Here 
</div> 

<div id="edit-field-gallery-images-1-data-revisedby-wrapper" class="form-item"> 
<div id="edit-field-gallery-images-1-data-revisedon-wrapper" class="form-item"> 
//Stuff in Here 
</div> 
</div>//End #edit-field-gallery-images-1-data-revisedby-wrapper 

은 여기 내 JQuery와

$("input[type='checkbox'][id$='-data-revise']:checked").each(function(){ 

    $(this).next("[id$=-data-revisedby-wrapper]").hide(); 
    $(this).find("[id$=-data-revisedon-wrapper]").hide(); 


}); 

내가 jfriend00 년대와 user625037의 솔루션 comination을 사용합니다. 여기있다 : 나는 당신의 질문을 이해하면

$("div[id$=data-revisedby-wrapper]").hide(); 
    $("div[id$=data-revisedon-wrapper]").hide(); 

$("input[id^=edit-field-gallery-images]:checked").each(function() { 
    var startPos = "edit-field-gallery-images-".length; 
    var endPos = this.id.indexOf("-", startPos); 
    var id = this.id.substring(startPos, endPos); 

     $("div[id$="+id+"-data-revisedby-wrapper]").show(); 
     $("div[id$="+id+"-data-revisedon-wrapper]").show(); 



}); 


$(".revise-check").change(function() { 
    if(this.checked) { 
    $("#" + this.id + "by-wrapper").fadeIn(); 
    $("#" + this.id + "on-wrapper").fadeIn(); 
    } 
    else{ 
    $("#" + this.id + "by-wrapper").fadeOut(); 
    $("#" + this.id + "on-wrapper").fadeOut(); 
     } 
}); 

Answer 1

바인드 클릭 이벤트

는 여기의 식별자 만 클래스와 컨테이너 간단한 버전의 id는 edit-field-gallery-images로 시작하고 입력 객체의 id에서 ID를 추출합니다.빠른 샘플 코드 :

// bind click event for input with id start with edit-field-gallery-images 
$("input[id^=edit-field-gallery-images]").click(function() { 
    var startPos = "edit-field-gallery-images-".length; 
    var endPos = this.id.indexOf("-", startPos); 
    var id = this.id.substring(startPos, endPos); 
    if(this.checked) { 
     $("#edit-field-gallery-images-" + id + "-ahah-wrapper").show(); 
    } 
    else { 
     $("#edit-field-gallery-images-" + id + "-ahah-wrapper").hide(); 
    } 
}); 

Answer 2

적절하게, 당신이 확인란을 선택하지 않은 경우 체크 박스를 따라 체크 박스 ID에서 파생 된 ID를 가진 div의 일부를 숨길. 당신은 파생 된 ID를 가진 div의 숨길이 jQuery를 사용할 수 있습니다이를 위해

$("#edit-field-gallery-images-0-data-revise, #edit-field-gallery-images-1-data-revise").change(function() { 
    $("#" + this.id + "dby-wrapper").toggle(this.checked); 
    $("#" + this.id + "don-wrapper").toggle(this.checked); 
}); 

를 작동, 당신은 div의 일부가 제대로 닫혀 있지 않습니다 귀하의 HTML을 수정해야합니다.

여기에서이 작품을 볼 수 있습니다 : http://jsfiddle.net/jfriend00/bSnCt/. 체크 박스를 켜기/끄기를 클릭하면 아래 내용이 숨겨진 방법을 볼 수 있습니다.

질문을 올바르게 이해하지 못한 경우 다른 사람들도 이해할 수 있도록 질문을 명확히하십시오.

N 개의 체크 박스 (N은 크고 임의의 숫자 임)의 경우 각 체크 박스에 공통 클래스 이름을 지정해야하며 jQuery를 다음과 같이 사용하면 모든 체크 박스에이 동작이 적용됩니다.

$(".autoCheckbox").change(function() { 
    $("#" + this.id + "dby-wrapper").toggle(this.checked); 
    $("#" + this.id + "don-wrapper").toggle(this.checked); 
}); 

HTML을 제어하면 ID 문자열을 조작하는 것이 가장 쉬운 방법은 아닙니다. 공통 클래스 이름 (예 : "자동 숨김")을 숨기고 항목 체크 박스 주위에 컨테이너 div를두고 숨길 내용을 지정하는 것이 좋습니다. 그러면 다음과 같이 모든 작업을 할 수 있습니다.

$(".autoCheckbox").change(function() { 
    $(this).parent().find(".autoHide").toggle(this.checked); 
}); 

복잡한 ID 값은 전혀 사용되지 않습니다. 각 확인란과 숨길 수있는 내용은 자신의 컨테이너 div에 포함되어 있기 때문에 원하는만큼 페이지에 넣을 수 있으며 체크 박스는 주어진 클래스 이름을 가진 동일한 상위 항목을 찾아서 숨길 내용을 결정합니다. 그것은 꽤 우아 할 수 있습니다.

<div class="container"> 
    <label> 
     <input class="autoCheckbox" type="checkbox" checked="checked"> Check here to show related content 1 
    </label> 
    <div class="autoHide">Line 1</div> 
    <div class="autoHide">Line 2</div> 
</div> 
<br><br> 
<div class="container"> 
    <label> 
     <input class="autoCheckbox" type="checkbox" checked="checked"> Check here to show related content 2 
    </label> 
    <div class="autoHide">Line 1</div> 
    <div class="autoHide">Line 2</div> 
</div> 

http://jsfiddle.net/jfriend00/7VTMy/ 그리고, JS 코드를 제어 할 : 입력

$(".autoCheckbox").change(function() { 
    $(this).closest(".container").find(".autoHide").toggle(this.checked); 
}); 

Answer 3

이 확인란을 선택하면 당신은 아이디에 대한 정규식을 사용할 수 있습니다, 당신은 다음 일치하는 요소를 선택 반환 값을 사용할 수 있습니다.

$("input[type=checkbox][id^=edit-field-gallery-images-]").change(function (e) { 
    var checked = $(this).is(':checked'), 
     match = $(this).attr("id").match(/^edit-field-gallery-images-([\d+])-data-revise$/); 
    if (checked) { 
     $('#edit-field-gallery-images-' + match[1] + '-data-revisedby-wrapper').show(); 
     $('#edit-field-gallery-images-' + match[1] + '-data-revisedon-wrapper').show(); 
    } else { 
     $('#edit-field-gallery-images-' + match[1] + '-data-revisedby-wrapper').hide(); 
     $('#edit-field-gallery-images-' + match[1] + '-data-revisedon-wrapper').hide(); 
    } 
});