2

我想知道是否有更好的方法来编写这个 JavaScript (Jquery) 代码。这个片段动态地创建了一个带有链接的 H3。

我的设计师正在疯狂地尝试将其样式化为 JavaScript 中的样式。我正在尝试将其重新编写/重构为更小的块，以允许我的设计师设计样式，而无需在一行上查看所有这些代码。

var dvClassContainer = $(document.createElement('div')).attr("id", 'dvclassconatiner_' + classVal).attr("classifname", classifname).attr("memclassnumber", memclassnumber).html('<h3>' + classifname + '<a id="ancclassremove_'+ classVal +'" classVal="' + classVal + '" onclick="RemoveClassificationUponConfirm(\'' + classVal + '\');" class="buttons delete btnSmall">Delete</a></h3><img style="display:none;" id="imgloadRemClass_' + classVal + '" alt="loading" src="../Images/application/smallUploading.gif" />');

我正在考虑创建更多变量并将它们组合在一起。有没有一种“更干净”的方式来写这个？

4

5 回答 5

2 
var dvClassContainer = $(document.createElement('div'))
                            .attr("id", 'dvclassconatiner_' + classVal)
                            .attr("classifname", classifname)
                            .attr("memclassnumber", memclassnumber)
                            .html('<h3>' + classifname + '<a id="ancclassremove_'+ classVal +'" classVal="' + classVal + '" onclick="RemoveClassificationUponConfirm(\'' + classVal + '\');" class="buttons delete btnSmall">Delete</a></h3><img style="display:none;" id="imgloadRemClass_' + classVal + '" alt="loading" src="../Images/application/smallUploading.gif" />');

最后一行仍然需要修复。我会创建元素，然后设置它们的属性，然后将它们附加到h3. 您可以使用var h3 = $("<h3></h3>");（作为示例）执行此操作，并使用设置属性.attr()，最后.append()将它们放在一起。

于 2012-06-27T17:26:48.913 回答
2

如果您利用更多 jQuery 的功能，代码将变得更易读且更易于维护：

var dvClassContainer = $('<div>');
dvClassContainer.attr({
  id: 'dvclasscontainer_'+classVal,
  classifname: classifname,
  memclassnumber: memclassnumber
});
var dvHeader = $('<h3>');
var dvHeaderLink = $('<a>Delete</a>');
dvHeaderLink.attr({
  id: 'ancclassremove_'+classVal,
  classVal: 'classVal',
  class: 'buttons delete btnSmall'
}).on('click',function(){
  RemoveClassificationUponConfirm(classVal);
});
var dvImg = $('<img>');
dvImg.attr({
  id: 'imgloadRemClass_'+classVal,
  alt: 'loading',
  src: '../Images/application/smallUploading.gif'
});
dvClassContainer.append(dvHeader.append(dvHeaderLink.append(dvImg)));

理想情况下，您还希望将所有这些非标准属性（classifname、memclassnumber、classVal）移动到data-可以通过 jQuerydata()函数访问的属性。

于 2012-06-27T17:28:48.757 回答
0

在承认这一行代码很讨厌之后，我将采取不同的方式。

让您的设计师头疼的不是 JavaScript。如果他们不能用 CSS 设置样式，他们就不够努力。当然，h3 和锚点位于其他元素内部，它们可以抓取一些样式：

.someContainer h3 { color: chartreuse; }

但是，如果他们已经尝试了所有可能的方法，您仍然只需要添加一两个新类（到 h3 和锚点）。你在哪里你.html('<h3>'...会把它改成.html('<h3 class="someClass">'...

尽管我们在糟糕的实现中优化和彻底修复糟糕的 JS 很有趣，但如果我们假设这是“工作”，那么问题在于设计者的样式能力。因此，这并不是真正的 JavaScript 问题。

于 2012-06-27T17:31:59.190 回答
0 
var dvClassContainer = $('<div/>')
     .attr({'id': 'dvclassconatiner_' + classVal,
           'classifname': classifname,
           'memclassnumber': memclassnumber
     })
     .html(
         function() {
             var $title = $('<h3>' + classifname + '</h3>');
             var $link = $('<a>Delete</a>').attr({
                 'id': 'ancclassremove_' + classVal,
                 'classVal': classVal,
                 'class': 'buttons delete btnSmall'
             })
             .on('click', function() {
                 RemoveClassificationUponConfirm(classVal);
             });

             var $img = $('<img/>').attr({
                 'id': 'imgloadRemClass_' + classVal,
                 'alt': 'loading',
                 'src': '../Images/application/smallUploading.gif'
             })
             .css('display', 'none');

             return $title.append($link).add($img);
     });

演示

于 2012-06-27T17:57:56.423 回答
0

使用 Douglas Crockford 的 Supplant 方法。它标记了一个字符串，因此您可以动态构建字符串。这是一个小提琴示例：http: //jsfiddle.net/mmeah/F23rk/

// http://javascript.crockford.com/remedial.html
if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}

var classVal="x", classifname="y", memclassnumber="z"; //predefined

var dvClassHtml = $("#someDiv").html();
$("#someDiv").html("");
var params ={
    "classVal":classVal,
    "classifname":classifname,
    "memclassnumber":memclassnumber
};
dvClassHtml=dvClassHtml.supplant(params);

var dvClassContainer = 
$(document.createElement('div'))
.attr("id", 'dvclassconatiner_' + classVal)
.attr("classifname", classifname)
.attr("memclassnumber", memclassnumber)
.html(dvClassHtml);
于 2012-06-27T18:01:36.760 回答