質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

1回答

61926閲覧

thymeleafで条件に合わせて複数のclassを付けたい

koronatail

総合スコア433

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

1クリップ

投稿2016/10/26 10:03

###前提・実現したいこと
以下の例のような形で、要素に対して条件に合わせて数種類のクラスを付与したいです。
↓Thymeleaf上

html

1<div th:classappend="${data.isYasai()} ? 'yasai':''" th:classappend="${data.isGreen()} ? 'green':''" th:classappend="${data.isOishii()} ? 'Oishii':''">かぼちゃ</div>

↓理想としてる実行結果

html

1<div class='yasai green Oishii'>かぼちゃ</div>

上記のものをそのままThymeleaf上で動かすと、最後のth:classappendのみ反映されてclass='Oishii'しか出力されませんでした。
一応以下のような形で複数付けられたのですがわかりづらいような気がして改善できないかと思い質問させていただきました。

html

1<div th:classappend="${data.isYasai()} ? (${data.isGreen()} ? (${data.isOishii()}):'yasai green Oishii'):(${data.isGreen()} ? (${data.isOishii()})? 'green':'green Oishii') : (${data.isOishii()}?'Oishii':'') ">かぼちゃ</div>

なにか複数のクラスを付ける簡単な方法はありませんか

###試したこと

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<div th:classappend="|${x.isTrue ? 'class1' : ''} ${y.isTrue ? 'class2' : ''}|"></div>
<div th:classappend="${(x.isTrue ? 'class1' : '') + (y.isTure ? ' class2' : '')}"></div>

どちらでも動きます。

投稿2017/03/16 06:54

printai

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koronatail

2017/06/06 11:11

回答ありがとうございます!すっかり遅くなってしまいましたが・・・・ 頭が固かったです。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問