在选择时更改 p:graphicImage 边框颜色答案

【问题标题】：Changing p:graphicImage border colour on selection在选择时更改 p:graphicImage 边框颜色
【发布时间】：2012-06-26 10:51:58
【问题描述】：

我有以下代码来显示图像

<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 文件来显示 p:graphicImage 的边框 .bord { 边框样式：实心；边框宽度：2px；边框颜色：#00FFFF； }

我可以查看多个图像，当我选择一个图像时，它需要更改该图形图像的边框颜色（在任何时间点都会只有一个选定的图像），我如何在 PrimeFaces 中做到这一点我尝试使用 javascript，但不知道如何更改现有组件的边框。

更新：1

我使用以下代码完成了上述任务

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

和javascript

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

现在我的问题是如何在新选择上更改之前选择的边框颜色。

【问题讨论】：

标签： javascript jsf-2 primefaces

【解决方案1】：

我认为这是一个更简洁的解决方案，您不必使用全局变量。

在 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.
}

【讨论】：

【解决方案2】：

这就是我做上述事情的方式

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?

【讨论】：