Как динамически назначить идентификатор для изображения - PullRequest
Новая
       6

Как динамически назначить идентификатор для изображения

0 голосов
/ 13 декабря 2011 
var intFields = 0;
var maxFields = 10;
function addElement() {
    "use strict";
    var i, intVal, contentID, newTBDiv, message = null;
    intVal = document.getElementById('add').value;
    contentID = document.getElementById('content');
    message = document.getElementById('message');
    if (intFields !== 0) {
        for (i = 1; i <= intFields; i++) {
            contentID.removeChild(document.getElementById('strText' + i));
        }
        intFields = 0;
    }
    if (intVal <= maxFields) {
        for (i = 1; i <= intVal; i++) {
            intFields = i;
            newTBDiv = document.createElement('div');
            newTBDiv.setAttribute('id', 'strText' + intFields);
            newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>";
            contentID.appendChild(newTBDiv);
            message.innerHTML = "Successfully added " + intFields + " fields.";
        }
    } else {
        for (i = 1; i <= maxFields; i++) {
            intFields = i;
            newTBDiv = document.createElement('div');
            newTBDiv.setAttribute('id', 'strText' + intFields);
            newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>";
            contentID.appendChild(newTBDiv);
            message.innerHTML = "Unable to create more than 10 receipient fields!";
        }
    }
}

Мой скрипт здесь динамически добавляет до 10 полей, где пользователи смогут вводить адрес электронной почты, а справа от текстового поля я добавляю изображение знака минус, которое вызывает другой скрипт. У меня возникают проблемы с тем, как определить и отслеживать знаки минуса. Мне нужно, чтобы скрипт со знаком минус распознавал текстовое поле и удалял его. Я могу написать сценарий удаления достаточно легко, но я не уверен, как сказать изображению, какое текстовое поле удалить. Любая помощь, предложения или комментарии приветствуются.

Спасибо, Ник С.

Ответы [ 3 ]

1 голос
/ 13 декабря 2011

Вы можете добавить класс в поле с именем минус, а затем проверить таким образом. Я бы предложил использовать для этого jquery.

Добавить класс 

$("#element").addClass("minus");

Чтобы удалить все элементы этого класса 

$("body input").each(function (i) { 
    if($(this).attr("class") == "minus"){
       $(this).remove();
    }
});
0 голосов
/ 13 декабря 2011

Попробуйте добавить класс к полю и тот же класс к знаку минус.

Поэтому добавьте это сразу после идентификатора setAttribute, 

newTBDiv.setAttribute('class', 'field' + intFields);

, затем просто удалите все элементы, которые имеютэтот класс.

0 голосов
/ 13 декабря 2011

Два лучших варианта imo: 1) обход DOM или 2) манипулирование фрагментами идентификатора.

При первом способе вы должны передать ссылку на элемент, где происходит событие (знак минус), а затем перейти от DOM оттуда к соответствующему текстовому полю (в jQuery вы можете использовать $(this).prev(), например).

При втором способе вы должны назначить префикс или суффикс для идентификатора инициирующего элемента (знак минус) и такой же префикс или суффикс для целевого элемента (текстовое поле). Затем вы можете (снова) сгенерировать соответствующий идентификатор для целевого элемента, просто манипулируя идентификатором строки из инициирующего элемента.

Этого достаточно, чтобы начать?

...