Jquery выберите Идентификационные номера элементов формы - PullRequest
0 голосов
/ 03 сентября 2011

У меня есть форма с многозначным набором полей с каждой оболочкой поля и внутренними div-элементами, установленными с идентификатором, увеличивающимся на 1 число, чтобы различать идентификаторы. Если флажок установлен для элемента формы флажка в отдельном наборе полей, мне нужно скрыть элементы div, которые переносят элементы формы, которые следуют в этом наборе полей. Проблема, с которой я сталкиваюсь, заключается в том, что имена идентификаторов содержат уникальное значение в середине строки. Пример: "# beginofIDSting- X -endofStringName". Я не могу изменить идентификатор или добавить классы к оболочкам.

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

Ответы [ 3 ]

1 голос
/ 03 сентября 2011

событие связывания клика для ввода, идентификатор которого начинается с edit-field-gallery-images и извлекает идентификатор из идентификатора объекта ввода.быстрый пример кода:

// 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();
    }
});
0 голосов
/ 03 сентября 2011

Вы можете использовать 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();
    }
});
0 голосов
/ 03 сентября 2011

Если я правильно понимаю ваш вопрос, вы хотите скрыть некоторые элементы div с идентификаторами, полученными из идентификатора флажка, которые следуют за флажком, когда флажок снят.Вы можете использовать этот jQuery, чтобы скрыть 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);
});

И сложные значения идентификаторов вообще не используются.Поскольку каждый флажок и скрытый контент содержатся в их собственном контейнере 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);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...