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

问题描述

| 我编写了以下代码，将可点击的“链接按钮”添加到页面的一部分。

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方法来提高此代码的可读性？     

解决方法

        我不确定这是否真的提高了可读性，这是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变量。     ,        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);

编辑：修复了未附加“ 3”的问题。     ,        唯一的实际方法是抽象一些标记生成或将脚本扩展一些以使其更具可读性：http://jsfiddle.net/3dYPX/1/ 您还使用jQuery，因此您可能需要考虑更改触发javascript的方式。尝试查看.live（）事件。 （我只是举一个例子，并不是很重要） 对不引人注目的JavaScript使用实时事件： http://jsfiddle.net/3dYPX/2/ 目前，这一切都在onLoad事件内部完成，仅作为示例。     ,         使用模板库，例如 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 }

只需添加\“ shown \”类以显示特定的模型块即可。     ,        干得好：

$(\'#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],$(\'<div class=\"models\">\').hide()[0]
]);

因此，您可以在父级DIV（公共父级）上定义该数据填充，然后重构“ 9”函数，以便它从父级DIV读取这些数据值，而不是将其作为参数传递。