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 を持つ要素は 1 つだけです。

呼び出すと、すべての要素ではなく、それらの要素の1 つ$('#hiddenimgbox')だけが取得されます。動的部分を追加して ID を一意にするか、代わりにクラスを使用してください。

さらに、要素をデフォルトで非表示にする場合は、JavaScript を使用せずに HTML で行います。これは不要であり、読み込み時にページのサイズがすぐに変更される可能性があります。

また、もう 1 つ問題があることに気付きました。要素を宣言するときに2 つの属性を設定しているということです。 id

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

id2 番目は無視される可能性が高いため、等しい要素を持つことはありませんhiddenimgbox。hiddenimgboxこの場合、各要素のクラスに切り替えることをお勧めします。

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

次に、必要に応じて代わりに$('#hiddenimgbox')使用するのではなく。$('.hiddenimgbox')

于 2013-01-02T11:15:36.737 に答える
0

id属性を2回作成しました。したがって、ブラウザは最初のものだけを受け入れます。このように変更してみてください。

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

ページの要素にアクセスするには、DOM が読み込まれるまで待つ必要があります。

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