Изменение р: graphicImage цвет границы по выбору

Question

У меня есть следующий код для отображения изображений

<ui:repeat id="repeat5" value="#{getData.imageThumbnail1}" var="imagesLst2" varStatus="loop"> 
    <h:panelGroup> 
     <p:commandLink id="cl3" action="#{getData.imageID(imagesLst2.imageID)}" styleClass="ovr" update=":mainForm:tabView:example"> 
      <p:graphicImage id="gi3" value="#{imagesStreamer.image}" styleClass="bord" alt="image not available3" width="60" height="60" > 
       <f:param name="id5" value="#{imagesLst2.imageID}" /> 
      </p:graphicImage> 
     </p:commandLink> 
    </h:panelGroup> 
</ui:repeat> 

У меня есть CSS файл для отображения границы для р: graphicImage .bord { границы стиля: твердое вещество; border-width: 2px; border-color: # 00FFFF; }

Я могу просмотреть несколько изображений, когда я выбираю изображение, которое необходимо изменить для цветного изображения для этого графического объекта (в любой момент времени будет только одно выбранное изображение), как это сделать в PrimeFaces Я пробовал использовать javascript, но не мог понять, как изменить границу для существующего компонента.

UPDATE: 1

я сделал выше задачи с помощью следующего кода

<p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3" width="60" height="60" > 

и яваскрипта

function mouseDown(element) { 
    var element1 = (element); 
    element1.style.borderColor="#ff0000"; 
} 

Теперь моя проблема в том, как изменить ранее выбранный цвет границы на новый выбор.

Answer 1

Это, как я сделал выше вещи

JSF код

<p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3" width="60" height="60" > 

Javascript

var elementOld; 

function mouseDown(element) { 
    var element1 = (element); 
    element1.style.borderColor="#ff0000"; 

    if(elementOld != null){ 
     elementOld.style.borderColor="#739E39" 
    } 
    elementOld = element1; 
} 

Благодаря BalusC ответить How to refer to a JSF component Id in jquery?

Answer 2

Я думаю, что это чистое решение , и вам не придется использовать глобальные переменные.

Добавить то, что окружает ui: repeat. Затем просто решается с помощью jquery.

разметки:

<p:graphicImage id="gi3" value="#{imagesStreamer.image}" alt="image not available3" width="60" height="60" onclick="setBorder(this)"> 

JavaScript:

function setBorder(element) { 
    $('#imageContainer .bord').removeClass('bord'); // Removes the border from all images that has it. 
    $(element).addClass('bord'); // Adds the border class to the clicked image. 
}