0

在下面给出的代码中，我正在显示prettyphoto单击后在查看器中打开的图像。

  <s:iterator value="allPhotos">
    <a href="#inline-<s:property value="pictureid"/>" rel="prettyPhoto" >
      <img src="<s:property value="photourl"/>" alt="">
    </a>
    <div id="inline-<s:property value="pictureid"/>" id="hiddenimgbox">
      <img src="<s:property value="photourl"/>" alt="">
      <div class="overlay"><s:property value ="title" /></div>
    </div>

  </s:iterator>

我面临的问题是我无法隐藏以下应该仅在查看器中打开的 div 标签。

  <div id="inline-<s:property value="pictureid"/>" id="hiddenimgbox">
    <img src="<s:property value="photourl"/>" alt="">
    <div class="overlay"><s:property value ="title" /></div>
  </div>

虽然我在文档的头部有以下脚本用于隐藏div

  <script>
    $("#hiddenimgbox").hide();
  </script>

请纠正我...

4

3 回答 3

4

该“元素”在<s:iterator>标签内，因此实际上是多个元素。然而，在 HTML 页面中，ID 必须是唯一的——只有一个元素应该具有特定的 ID。

当您调用$('#hiddenimgbox')它时，它只会检索其中一个元素，而不是全部。要么通过向其添加动态部分来使 ID 唯一，要么使用类来代替。

此外，如果您希望元素默认隐藏，请在 HTML 中进行，不要使用 JavaScript。这是不必要的，并且可能会导致用户在加载后立即看到页面调整大小。

我刚刚注意到还有一个问题：您在声明元素时设置了两个属性： id

<div id="inline-<s:property value="pictureid"/>" id="hiddenimgbox">

第二个可能会被忽略，所以你永远不会有任何id等于 的元素hiddenimgbox。在这种情况下，我绝对建议您切换hiddenimgbox为每个元素的类：

<div id="inline-<s:property value="pictureid"/>" class="hiddenimgbox" style="display:none">

然后，而不是在必要时使用$('#hiddenimgbox')use代替。$('.hiddenimgbox')

于 2013-01-02T11:15:36.737 回答
0

您必须等待 DOM 被加载，然后才能访问页面上的元素，请使用：

<script>
/* Wait until the DOM is ready */
$(function(){
    $("#hiddenimgbox").hide();
});
</script>
于 2013-01-02T11:10:20.827 回答
0

您已经创建了两次 id 属性。所以浏览器只会接受第一个。像这样改变它并尝试。

<div id="inline-<s:property value="pictureid"/> hiddenimgbox">
于 2013-01-02T11:24:08.793 回答