visualforce页面图片标签的id属性如何赋值？

Question

我不能为image...am动态分配id值引用这个图像javascript来显示向上/向下箭头accordingly...here是代码片段...

<apex:variable var="count" value="{!1}"/>
<apex:image id="msn{!count}" url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />

但是我得到的编译错误是“id需要文字值”……

我们不能为id属性动态赋值吗?？

Answer 1

来自Apex image，

<apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/>

上面的示例呈现以下HTML：

<img id="theImage" src="/img/myimage.gif" width="220" height="55"/>

所以改变吧

<apex:image id="msn{!count}" url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />

至

<img id="msn{!count}" src="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />

Answer 2

你是对的，你不能动态分配一个元素id。它必须是字符串文字。但是，我已经使用class属性创建了自定义in，稍后可以在javascript中使用。我用jQuery做到了这一点，它是一个强大的选择器，可以根据标记类型和类选择元素。

下面的例子只是一个示例，但是使用jQuery你可以获得很大的创造力。

<apex:variable var="count" value="{!1}"/>
<apex:image id="msn" 
    url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" 
    alt="Open-close"
    styleClass="msn{!count}" />

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"/>

    <script>
        jQuery.noConflict();

        function doSomethingWithImg() {
            try {
                var imgElement = jQuery('.msn1');

                /*Do what you need to do with the element*/
            } catch (e) { /*Ignore Error*/ }
        }
     </script>

这是指向jQuery选择器的链接：jQuery Selector Documentation