我认为 JQuery 很棒,但我也喜欢将 HTML 保留在 HTML 文档中而不将其保留在 javascript 中的想法。我是什么意思?您知道,假设您正在创建一个包含许多行或可变数量行的动态表。这正是我不想做的:
function initBoard(symbol) {
for (var i=0;i<30;i++) {
myBoard += "<tr>";
enemyBoard += "<tr>";
for (var j=0;j<60;j++) {
myBoard += '<td bgcolor="#0000ff" id="my_sqr_'+i+'_'+j+'">'+symbol+</td>';
enemyBoard += '<td bgcolor="#ff0000" id="enemy_sqr_'+i+'_'+j+'">'+symbol+'</td>';
}
myBoard += "</tr>";
enemyBoard += "</tr>"
}
$("#my-board").html(myBoard);
$("#enemy-board").html(enemyBoard);
}
几年前,我想出了一个几乎运行良好的解决方案,我经常使用它,但我仍然希望看到更好的东西,这就是我的问题所在。我当前的策略是在主 HTML 文件的底部创建一个隐藏的 div。例如:
<div class="hidden-templates" style="visibility:hidden;">
<div id="board-line-tpl">
<td bgcolor="--bg-color--" id="--side--_sqr_--index1--_--index2--">--symbol--</td>
</div>
</div>
然后将 javascript 更改为如下内容:
function initBoard(symbol) {
for (var i=0;i<30;i++) {
myBoard += "<tr>";
enemyBoard += "<tr>";
for (var j=0;j<60;j++) {
// Get the template
myBoardLine = $("#board-line-tpl").html();
// substitue the template's"variables" with unique data
myBoardLine.replace(/--side--/, "my");
myBoardLine.replace(/--bg-color--/, "#0000ff");
myBoardLine.replace(/--index1--/, i);
myBoardLine.replace(/--index2--/, j);
myBoardLine.replace(/--symbol--/, symbol);
myBoard += myBoardLine;
// You get the idea. I'll leave this line as is.
enemyBoard += '<td bgcolor="#ff0000" id="enemy_sqr_'+i+'_'+j+'"></td>';
}
myBoard += "</tr>";
enemyBoard += "</tr>"
}
$("#my-board").html(myBoard);
$("#enemy-board").html(enemyBoard);
}
好吧,您注意到我的解决方案的一个糟糕之处是相当冗长,但公平地说,如果您的模板具有任何复杂性,它似乎确实会发光。具有 5 行或更多行的 HTML 是一个很好的模板候选者。它的另一个优点是它确实可以从 Javascript 中提取 HTML。现在我可以让我的 HTML 设计师在隐藏模板 div 中编辑 HTML,并更改它的外观并根据需要放入类(教他模板及其用途很容易),所以现在他不需要了不必接触 Javascript。然而,最近我在将整个表定义为模板时遇到了一些问题。当 JQuery 读取模板时,它尝试重新解释表代码,结果搞砸了。
最佳答案
jQuery 提供了一种语法,您可以在创建元素时指定属性。这应该会提供您想要的干净外观。
$('<tr />', {
id: 'foo',
class: 'row'
});
您可能还想考虑将板 x/y 属性存储在数据对象中,而不是嵌入到 id 中。
$('<tr />').data('x', xval); //set data property
var xval = $(element).data('x');
这是一个基于您的代码的示例:
var $table = $('<table />');
for (var i = 0; i < 30; i++) {
var $row = $('<tr />');
for (var j=0;j<60;j++) {
var $td =($('<td />', {
id: i + '_' + j,
bgcolor: '#0000ff',
text: i
}));
$row.append($td);
}
$table.append($row);
}
$('body').append($table);
关于javascript - 在 JQuery 中,如何将 HTML 排除在 JavaScript 之外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8950972/