根据 Thymeleaf 中的特定条件使图像可点击答案

【问题标题】：Make image clickable based on certain condition in Thymeleaf根据 Thymeleaf 中的特定条件使图像可点击
【发布时间】：2018-08-21 06:21:32
【问题描述】：

我正在获取一个属性 html“image_clickable_status”，如果它是 true，我需要使图像可点击，如果它是 false，则图像不应该是可点击的。以下是我正在尝试做的事情

<div th:switch=${image_clickable_status}>

 <a th:case=“true ” th:href="@{/getConsent/yes}">
<a th:case=“false ” th:href=“#”>
<img 

 src="https://samplegoogle.img" alt="viu"/>
</a>
 </a>

 </div>

但这不起作用，任何想法如何以更好的方式处理这种情况。

【问题讨论】：

为什么要嵌套控件？

标签： java spring thymeleaf

【解决方案1】：

你可以使用pointer-events: none;。

例如

<a th:style="${image_clickable_status} ? '' : 'pointer-events: none;'" 
   th:href="@{/getConsent/yes}">
    <img src="https://samplegoogle.img" alt="viu"/>
</a>

【讨论】：

【解决方案2】：

您可能希望使用if-else 语句来区分链接和段落：

<div th:if="${image_clickable_status}">
    <a th:case=“true ” th:href="@{/getConsent/yes}">
        <img  src="https://samplegoogle.img" alt="viu"/>
    </a>
</div>
<div th:unless="${image_clickable_status}">
    <img  src="https://samplegoogle.img" alt="viu"/>
</div>

上面的解决方案有点冗长。或者，使用样式使链接不可点击并默认使用光标指针。

<a th:style="${image_clickable_status} ? '' : " + 
            "'pointer-events: none; cursor: default;'" 
   th:href="@{/getConsent/yes}">

    <img src="https://samplegoogle.img" alt="viu"/>
</a>

【讨论】：