Question

我试过搜索，但不知怎的，我无法思考我需要使用健全的代码在html元素中添加动态标签。不确定这是不是好的做法，但想问一下。现在我知道如何将cssclass应用于href中的class属性。但是，如果我想要注入整个属性＆＃34; class =＆＃39; one＆＃39;＆＃34;在一个href我该怎么做？

可以这样做。我知道我可以做点什么

<a href="${properties['jcr:titleurl']}" class="${properties.openinnewwindow ? 'nonunderline' : ''}"> <h3>${properties['jcr:title']}</h3></a>

但我想这样做，

<div class="col-md-12">       
<a href="${properties['jcr:titleurl']}"  data-sly-test="${properties.openinnewwindow ? 'class=one' : class='two'}"> <h3>${properties['jcr:title']}</h3></a>

Answer 1

使用data-sly-test确定是否保留或删除该元素，因此它不是您要查找的内容。

您提到如果变量为null或空白，则您不想要class属性。您使用三元运算符提供的代码就是这样做的。

<a href="#" class="${properties.openinnewwindow ? 'nonunderline' : ''}">link</a>

在truthy / falsey的概念中，Sight非常像JavaScript。在您的示例中，如果openinnewwindow是真实的（真，非空，或未定义等等），则class属性将等于nonunderline。如果openinnewwindow为false，则class属性不会出现在呈现的HTML中。

编写此代码的另一种方法是使用逻辑&&运算符。这种语法是您要求的：

<a href="#" class="${properties.openinnewwindow && 'nonunderline'}">link</a>

有关详细信息，请参阅Sightly specification。

如何在HTML属性的代码中添加条件逻辑

1 个答案: