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元素。我的anchor元素的目标是一个带有两个参数的javascript函数调用。是否有一种很好的jQuery方法来提高此代码的可读性？

Answer 1

我不确定这是否真的提高了可读性，这是一个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 2

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 3

唯一真正的方法是抽象一些标记生成或稍微扩展一下脚本以使其更具可读性：http://jsfiddle.net/3dYPX/1/

您也使用jQuery，因此您可能需要考虑更改触发javascript的方式。尝试查看.live（）事件。（我只是举个例子，而不是非常重要）

为不显眼的javascript使用直播活动： http://jsfiddle.net/3dYPX/2/

目前正在onLoad事件中完成所有操作，仅作为示例。

Answer 4

使用模板库，例如 jQuery模板而不是内联 HTML。
不使用“javascript：”URL，而是将事件处理程序附加到生成的DOM片段。
避免使用内联样式。

类似的东西：

$('#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

你走了：

$('#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/

考虑一下：

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

因此，您在父DIV（公共父级）上定义数据内容并重新考虑expandMake函数，以便它从父DIV读取这些数据值，而不是将它们作为参数传递

如何简化代码以使用jQuery向页面添加新元素？

5 个答案: