jquery - 使用jQuery hide()函数时遇到问题吗？

在下面给出的代码中，我显示的是单击后在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>

请纠正我...

最佳答案

该“元素”位于<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')而不是使用$('.hiddenimgbox')。