0

画像を表示する次のコードがあります

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

p:graphicImage .bord { border-style:solid; の境界線を表示する css ファイルがあります。ボーダー幅:2px; ボーダーカラー:#00FFFF; }

複数の画像を表示できます。画像を選択すると、そのグラフィック画像の境界線の色を変更する必要があります (いつでも選択された画像は 1 つだけです)。既存のコンポーネントの境界線を変更する方法がわかりませんでした。

更新: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";
}

今私の問題は、以前に選択した境界線の色を新しい選択でどのように変更するかです。

4

2 に答える 2

0

これが私が上記のことをした方法です

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返信のおかげ で、jqueryでJSFコンポーネントIDを参照する方法は?

于 2012-06-25T10:50:26.577 に答える
0

これはよりクリーンなソリューションだと思います。グローバル変数を使用する必要はありません。

ui:repeat を囲む a を追加します。次に、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.
}
于 2012-06-25T11:00:59.680 に答える