Как вы обрабатываете идентификаторы HTML-элементов и ссылки на Javascript при добавлении позиций с использованием Javascript? - PullRequest
Новая
       5

Как вы обрабатываете идентификаторы HTML-элементов и ссылки на Javascript при добавлении позиций с использованием Javascript?

0 голосов
/ 03 июня 2009

Прежде всего, я прочитал все предложенные вопросы, которые звучали наполовину актуально, и не нашел ничего, что касалось моей проблемы. Во-вторых, если это уже где-то решено, я не достаточно хорошо его искал. Наконец, к проблеме. : D

У меня есть страница с позицией. «Позиция» для наших целей - это просто набор HTML-элементов в горизонтальной строке, которые образуют строку входных данных HTML (например, представьте такие столбцы, как штучки, описание, вес, единичный тариф, общий тариф). Одним из элементов управления HTML в нашей позиции является собственно серверный элемент управления, который испускает некоторый Javascript. Среди прочего, Javascript сообщает объект типа X следующим образом:

var whatever = new X(constructor values);

Теперь пользователь может добавлять позиции с помощью кнопки Добавить. В настоящее время я просто клонирую чистую копию HTML, которая формирует позицию. Это также клонирует код Javascript, так что теперь у каждой позиции есть var whatever = new X(constructor values);. Это создает проблему в том, что есть несколько строк, ссылающихся на одну и ту же переменную Javascript (а именно, whatever).

Это, конечно, разрушает все, что мне нужно, чтобы ссылаться на каждый из whatever как на отдельные экземпляры, а не на один и тот же экземпляр. Мне интересно, есть ли подходы к решению этой ситуации. Как использовать пользовательский серверный элемент управления, но при этом ссылаться на Javascript, который излучает каждая строка? Или как мне создать новую позицию таким образом, чтобы избежать этой проблемы?

Я новичок во всей арене доработки DOM, использующей Javascript, и я не могу найти какие-либо полезные практики или примеры, которые могут оказаться полезными, поэтому я в некотором растерянности. *

Имеет ли все это смысл? Если нет, пожалуйста, дайте мне знать, что не так, и я постараюсь прояснить это как можно лучше.

РЕДАКТИРОВАТЬ: Вот небольшой пример кода.

Именно так выглядит объявление объекта JavaScript:

var example = new SmartDropDown('uomSDD','75','1','7','','','','',2);

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

Некоторые методы объекта SmartDropDown: ShowOptions, HideOptions, BindOptions.

Что касается кода, который вызывается при нажатии кнопки, вот он: 

function AddLineItem()
{
    var lineItemsParent = $("lineItems");
    var newRow = lineItemTemplateNode.cloneNode(true);
    lineItemsParent.appendChild(newRow);
}

Итак, подведем итог: HTML-элемент строки содержит обычные элементы: входные данные, выборки, интервалы и т. Д., А затем объявление JS, указанное выше. И из-за способа, которым я добавляю новую позицию (используя приведенный выше код), переменная JS тоже клонируется. И мне нужен способ 1) изменить идентификатор элемента и 2) отслеживать все ссылки JS (массив уже предложил).

Ответы [ 3 ]

2 голосов
/ 03 июня 2009

Использовать массив? 

   var lineItems = [];
   ...
   // when the button is clicked
   lineItems[lineItems.length] = new X(constructor values);

Если вам нужно создать новый идентификатор одновременно, вы можете добавить строку к индексу массива. 

   var lineItems = [];
   ...
   // when the button is clicked
   var id = 'item_' + lineItems.length.toString()
   lineItems[lineItems.length] = new X(id, ...);
1 голос
/ 03 июня 2009

Здесь действительно удобны JavaScript-фреймворки. У многих есть хорошие конструкторы, которые делают этот тип вещей простым. Например, используя Prototype , я могу сделать это: 

function buildMe(counter) {
    var tempHTML = new Element('div',{'id':'bleh'+counter,className:'product'})
    tempHTML.insert(new Element('a',{className:'prodTitleLinkA',href:'/here'})

    $('someDiv').insert(tempHTML)
    Event.observe('bleh'+count, 'click', function(event) {
       alert(element.id)
    });
}

Это создает несколько элементов и связывает с ними событие. Я могу продолжать пихать сколько угодно в «someDiv», каждый со своим идентификатором и событием.

0 голосов
/ 03 июня 2009

Думаю, мне понадобится немного больше информации, чтобы дать вам хороший ответ на этот вопрос. Не могли бы вы показать пример кода, как называется эта ваша функция, что присваивается var независимо от и другая информация, которую вы хотите / можете передать. Чем больше, тем лучше!

Я с радостью помогу, если смогу.

...