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文件来显示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";
}

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

Answer 1

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

jsf code

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

在选择时更改p：graphicImage边框颜色

2 个答案: