根據Thymeleaf中的特定條件使圖像可點擊

Question

我正在獲取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>

但這是行不通的，任何想法如何更好地處理這種情況。

Answer 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>

Answer 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>