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的解决方案。这是：

 $("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开头的输入绑定click事件，并从输入对象的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隐藏带有派生ID的div：

$("#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中，所以您可以在页面中拥有所需数量的这些内容，并且复选框通过查找具有给定类名的同一父项中的项目来了解要隐藏的内容。它可以很优雅。

这是没有id的简单版本，只有类和容器：

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使用RegEx，然后您可以使用返回的值来选择匹配的元素。

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

Jquery选择递增表单项的ID

3 个答案: