如何在多行 innerHTML 属性的 javascript 中包含 if 语句？

Posted 2023-05-07

【中文标题】如何在多行 innerHTML 属性的 javascript 中包含 if 语句？

【英文标题】：How to include an if statement within the javascript of a multiple line innerHTML property?

【发布时间】：2020-12-06 22:26:48

【问题描述】：

我正在使用 java-script 使用 innerhtml 属性在我的 html/php 页面上基于 js 变量呈现动态 svg。

这是一个复杂的 svg，所以我将字符串拆分为多行。

我当前的代码运行良好；

document.getElementById('diagram1').innerHTML 
= '<svg  >'
+ '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-></line>'
+ '<rect   x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

但是，如果我将任何行包装在 if 语句中，那么即使满足 if 语句的条件，该行也永远不会呈现。

document.getElementById('diagram1').innerHTML 
= '<svg  >'
if (test == 'on') 
+ '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-></line>'

+ '<rect   x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

有没有不同/更好的方法来做到这一点？我错过了什么吗？

【问题讨论】：

这不是动态构建字符串的方式。我确信控制台中的错误消息指向我们。

控制台没有显示错误。如果没有任何其他信息，这不是一个特别有用的评论。我确实问过是否有不同/更好的方法来做到这一点，所以我很高兴听到你可能有的任何解释。

【参考方案1】：

您可以在将字符串设置为 innerHTML 之前构建字符串：

let text = '<svg  >';
if (test == 'on') 
    text += '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-></line>';

text += '<rect   x="100" y="140" fill="#CCC"></rect>' + '</svg>';
document.getElementById('diagram1').innerHTML = text;

或者你可以使用三元：

document.getElementById('diagram1').innerHTML
= '<svg  >'
+ (test == 'on' ? '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-></line>' : '')
+ '<rect   x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

【参考方案2】：

您可以使用ternary operator。

document.getElementById('diagram1').innerHTML 
= '<svg  >' +
(test == 'on' ? 
'<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-></line>'
: '')
+ '<rect   x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

【参考方案3】：

您可以使用template literals 来做同样的事情。因此，如果您有任何条件，您可以将其包含在您的 HTML 中 -

`...some html before codition$test === 'on' ? 'when condition is true':null`

此外，在这种情况下，模板文字将是更好的选择，而不是多个 +，您可以以更短、更有效的方式对模板文字执行相同操作。

如果您仍然只想使用字符串，您可以尝试使用 三元运算符，就像我在上面使用模板文字所做的那样。另一种选择是将字符串拆分为多行，并根据您要应用的条件有条件地附加 HTML 代码。

【参考方案4】：

let defaultText = '<svg  >';
let extraText = '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-></line>';
let endText = '<rect   x="100" y="140" fill="#CCC"></rect>'
+ '</svg>';

document.getElementById('diagram1').innerHTML = test == 'on' ?  defaultText + endText : defaultText + extraText + endText; 

【参考方案5】：

您必须将它存储在一个变量中，然后在您的 if 子句中将其添加到此变量中，然后再添加其余部分。您没有将 innerHTML 正确构建在一起，if 和 behind 中的所有部分都被遗漏了，因此您会遇到这些丢失部分的麻烦。

let innerHTML = '<svg  >';
if (test == 'on') 
  innerHTML += '<line x1="0" y1="'+depth+'" x2="'+width+'" y2="'+depth+'" stroke="#ff6622" stroke-></line>'
;

innerHTML +=  '<rect   x="100" y="140" fill="#CCC"></rect>'
  + '</svg>';
  
document.getElementById('diagram1').innerHTML;