Как упростить код для добавления новых элементов на страницу с помощью jQuery?

Question

Я написал следующий код, чтобы добавить кликабельную «кнопку ссылки» в раздел моей страницы.

var linkButtonHtml = "<a data-makeId='" + makeId + "' href='javascript:expandMake(" + makeId + "," + categoryId + ")'>+</a> " + makeName;
var divHtml = "<div style='display:none' class='models' data-makeId='" + makeId + "'></div>" + "<br/>";
html += linkButtonHtml + divHtml;
$('#linkDiv').html(html);

Код работает нормально, но он уродлив и труден для чтения со всей конкатенацией строк.

Как видите, я создаю якорные элементы и элементы div с конкатенацией строк. Цель моего якорного элемента - вызов функции javascript с двумя аргументами. Есть ли хороший способ jQuery улучшить читаемость этого кода?

Answer 1

jQuery предлагает опцию для второго аргумента при создании элементов.

var linkButton = $('<a>',{'data-makeId':makeId,
                          href:'#',
                          click:function(){expandMake( makeId, categoryId )},
                          text:'+'
                  });

var div = $('<div>',{ style:'display:none',
                      'class':'models',
                      'data-makeId': makeId
                    })
                      .after('<br>');

$('#linkDiv')
    .empty()
    .append(html)
    .append(linkButton)
    .append( makeName )
    .append(div);

---

РЕДАКТИРОВАТЬ: Исправлена ​​проблема, когда makeName не был добавлен.

Answer 2

Я не уверен, действительно ли это улучшает читабельность. Вот 100% решения jQuery:

$(html)
  .append(
    $('<a />')
      .attr('data-makeId', makeId)
      .attr('href', 'javascript:void(0);')
      .click(function(event)
      {
        // Prevent clicking the link from leaving the page.
        event.preventDefault();

        expandMake(makeId, categoryId);
      })
      .text('+'))
  .append(
    document.createTextNode(makeName)
  )
  .append(
    $('<div />')
      .addClass('models')
      .attr('data-makeId=', makeId)
      .hide());

Где "html" в $ (html) - это переменная html, имеющаяся в вашем примере.

Answer 3

Вот, пожалуйста,

$('#linkDiv').empty().append([
    $('<a href="#">+</a>').data('makeId', makeId).click(function(e) {
        e.preventDefault();
        expandMake(makeId, categoryId);
    })[0],
    $('<span>').text(makeName)[0],
    $('<div class="models">').data('makeId', makeId).hide()[0],
    $('<br>')[0]
]);

Демонстрация в реальном времени: http://jsfiddle.net/cncbm/1/

---

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

Answer 4

1. Используйте библиотеку шаблонов, такую ​​как Шаблоны jQuery вместо встраивания HTML.
2. Вместо использования URL "javascript:" присоединяйте обработчики событий к сгенерированным фрагментам DOM.
3. Не используйте встроенные стили.

Что-то вроде:

$('#linkDiv')
    .empty()
    .append($.tmpl(myTemplate, {
        makeId: makeId,
        makeName: makeName,
        categoryId: categoryId
    }))
    .click(function () {
        var makeId = $(this).attr("data-makeId");

        if (makeId) {
            expandMake(makeId, $(this).attr("data-categoryId"));
        }
    });

Где myTemplate имеет содержимое:

<a href="#" data-makeId="${makeId}" data-categoryId="${categoryId}">${makeName}</a>
<div class="models" data-makeId="${makeId}"></div>

Вместо использования встроенного стиля для первоначального скрытия моделей, спрячьте их всех с помощью общего правила CSS, а затем выборочно отобразите их с классом:

.models { display: none }
.models.shown { display: block }

Просто добавьте класс «показанные», чтобы показать определенный блок моделей.

Answer 5

Единственный реальный способ - либо абстрагировать некоторые ваши генерации тегов, либо немного расширить сценарий, чтобы сделать его более читабельным: http://jsfiddle.net/3dYPX/1/

Вы также используете jQuery, так что вы можете подумать об изменениикак вы запускаете JavaScript.Попробуйте посмотреть на событие .live ().(Я просто приведу пример, но это не очень важно)

Использование живого события для ненавязчивого javascript: http://jsfiddle.net/3dYPX/2/

В данный момент все выполняется внутри события onLoad,просто использовать в качестве примера.