Question

for (i = 0; i < events.length; i++) {
   left_pos = (event_col[i] * xfactor * 100);
        //jquery part need cleaner
   $('.contain_textDiv')
       .append('<div class="sample_box1" style="margin-left:' + left_pos + '%;' + 'margin-top:' + Math.round(events[i].start) + 'px; width:' + Math.floor(95 * xfactor) + '%;' + 'position: absolute; height:' + Math.round(events[i].end - events[i].start) + 'px;"><div class="sample_boxHeader">Sample Layout</div><div class="sample_box_grayText">Sample Location</div></div>');
     }

这部分JavaScript代码将通过循环来更改当前的html样式并添加

<div class="sample"></div>

和

<div class="sample2"></div>

在我的HTML文件中，已存在<div class="sample"></div>

任何人都有更好的解决方案来清理这部分代码？我真的很感谢你的帮助！

Answer 1

不是将DOM元素作为字符串附加，而是在jQuery中创建一个新元素并附加：

var newEl = $('<div>').addClass("sample_box1").css({
    'margin-left': left_pos+"%",
    'margin-top': Math.round(events[i].start),
    width: Math.floor(95 * xfactor)+'%',
    //etc etc
});
$('.contain_textDiv').append(newEl);

Answer 2

有几种方法可以清理它。一种方法是缩进代码。你可以做的另一件事是使用jQuery的方法来设置样式属性值（所以你不必担心转义，什么不能）。

$('.contain_textDiv')
  .append(
    $('<div>')
      .addClass('sample_box1')
      .css({
        'margin-left': left_post + '%',
        'margin-top': Math.round(events[i].start) + 'px',
        width: Math.floor(95 * xfactor) + '%',
        height: Math.round(events[i].end - events[i].start) + 'px'
      })
      .append([
        $('<div class="sample_boxHeader">Sample Layout</div>'),
        $('<div class="sample_box_grayText">Sample Location</div>')
      ])
  )

（代码未经测试但应该让您入门。）

要考虑的另一件事（通常是最佳选择）是使用JavaScript模板引擎。有很多可供选择。我发现Swig非常高效轻便，只有基本的模板需求才有用。

Answer 3

我认为Brennan的答案是一个很好的清洁方法。但是如果由于某种原因你更喜欢将它构建为一个字符串，那么这里有一个“使用类似StringBuilder的数组”的例子，我喜欢不时使用它：

for (i = 0; i < events.length; i++) {
    left_pos = (event_col[i] * xfactor * 100);
    var sb = [];
    sb.push('<div class="sample_box1" ');
    sb.push(  'style="margin-left:' + left_pos + '%;');
    sb.push(  'margin-top:' + Math.round(events[i].start) + 'px; ');
    sb.push(  'width:' + Math.floor(95 * xfactor) + '%;');
    sb.push(  'position: absolute; ');
    sb.push(  'height:' + Math.round(events[i].end - events[i].start) + 'px;">');
    sb.push('<div class="sample_boxHeader">Sample Layout</div>');
    sb.push('<div class="sample_box_grayText">Sample Location</div>');
    sb.push('</div>');
    console.log(sb.join(''));
    $('.contain_textDiv').append(sb.join(''));
}

需要一个更好的解决方案来从javascript文件追加html

3 个答案: