Jquery select表单项目的递增ID's

Question

我有一个多值fieldset的表单，每个字段包装器和内部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

结合的Click事件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

如果我理解你的问题正确，你想隐藏一些的div从下面的复选框选中该复选框取消选中该复选框ID派生的ID。您可以使用此jQuery的隐藏的div派生IDS：

$("#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); 
}); 

对于这个工作，你将不得不解决您的HTML作为一些的div都没有正确关闭。

你可以在这里看到这个工作：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字符串的这种概念并不是最简单的方法。给你想隐藏一个普通的类名（比如“autoHide”）的东西要好得多，然后把一个容器div放在给定的复选框和你想隐藏的内容上。然后，你可以像这样工作：

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

而复杂的ID值根本没有使用。由于每个复选框和隐藏内容都包含在它们自己的容器div中，因此您可以在页面中包含尽可能多的这些内容，并且复选框通过在具有给定类名称的同一父项中查找项目来知道要隐藏哪些内容。它可以很优雅。

下面是简单的版本，没有身份证，只有类和容器：

http://jsfiddle.net/jfriend00/7VTMy/

<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> 

而且，JS代码来控制它：输入

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

Answer 3

您可以使用正则表达式对ID，当您选中该复选框，然后你可以使用返回值来选择相匹配的元素。

$("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(); 
    } 
});