Changing background color of header based on status in jsp

Question

I have a jsp with for each loop in it, now i need to change background color of h2 based on fruitStatus(i.e with delivered or inbag)

i mean if it is fruitMapModel.fruitStatus[frutListData.fruitId] is delivered, h2 backgroud color to be blue, if it is 'inbag' red color

<c:forEach var="frutListData" items="${fruitMapModel.fruitList}">
            <div id="fruitProgress<c:out value="${frutListData.fruitId}"/>">
                <li class="fruit">

                    <ul class="fruitheader" >
     <c:if test="${fruitMapModel.fruitStatus[frutListData.fruitId] == 'inBag' }">   
      </c:if>
   <c:if test="${fruitMapModel.fruitStatus[frutListData.fruitId] == 'delivered' }"> 
      </c:if>
                        <h2>  <c:out value="${fruitMapModel.fruitNameList[frutListData.fruitId]}" /> </h2>
                    </ul>
                </li>   
            </div>  
            </c:forEach>

.css file

.fruit h2 {float:left;margin:0 20px 0 0;
                padding:14px 20px 13px 20px;
                background:#ccc;
                font:normal 16px 'museo_sans_rounded700', Arial, Helvetica, sans-serif;
                color:#666;text-transform:uppercase;
                -webkit-border-radius: 5px 5px 0px 0px;
                border-radius: 5px 5px 0px 0px;
               }                    

.fruitheader {overflow:hidden;}
.fruitheader li {float:left;margin:0 20px 0 0;}

How could i change backgroud color of h2?Please help me on this.

score 0 · Accepted Answer · edited May 23 '17 at 12:32

Just let JSP print the status in class attribute of the HTML element of interest.

<ul class="fruitheader ${fruitMapModel.fruitStatus[frutListData.fruitId]}">

Then it's a matter of specifying the desired styles via CSS.

.fruitheader.inBag h2 { background: red; }
.fruitheader.delivered h2 { background: blue; }

Do note that <c:out> is unnecessary as long as you're on JSP 2.0+ and the value is not controlled by user. See also a.o. what is c:out used for in jsp.

Changing background color of header based on status in jsp

1 Answers1