0

.tpl ファイル ("comment_form.tpl") に次のコードがあります。このファイルは、3 つの異なる .tpl ファイル (「file_a」、「file_b」、および「file_c」) に 1 回ずつ含まれます。最後に、これら 3 つのファイルが別の .tpl ファイル ("somefile.tpl") に含まれています。

<script type="text/javascript">
$(document).ready(function Hide() {
    document.getElementById('div').style.display = 'none';
</script>

したがって、基本的に、「comment_form.tpl」は次のように「somefile.tpl」に3回ロードされます。

        .....
    </div><!-- .span9 -->
    {include file="includes/file_a.tpl"} // includes "file_a.tpl" which already includes "comment_form.tpl" (which contains the code).
    </div>
   .....//some code

   {include file="includes/file_b.tpl.tpl"} // "includes file_b.tpl" which already includes "comment_form.tpl" (which contains the code).

問題は、コードが初めて機能することです。のように、「comment_form.tpl」が「somefile.tpl」にロードされる 3 つの場所のうち、ターゲット「div」は最初の 1 回だけ非表示になります。次の 2 つの場所では、フォーム (div) は隠されていません。私は十分に明確であることを願っています。何が原因でしょうか??

4

1 に答える 1

1

$(document).ready(function() {})ページ全体で複数の呼び出しを行うことは完全に合法です。

IDで要素を隠しているようです。ID は一意である必要#divがあり、同じ ID を複数回使用する場合 (この例では)、最初の ID のみが によって選択されることに注意してくださいgetElementById()。それがあなたが経験していることです。

それぞれに固有の ID を与える<div>か、それらを CSS クラスでグループ化し、クラス全体を非表示にする必要があります。

CSS クラスを使用した例を次に示します。

<div class="comment_form">some content</div>
<div class="comment_form">some content</div>
<div class="comment_form">some content</div>
<script type="text/javascript">
$(document).ready(function () {
    $('.comment_form').css({'display' : 'none'});
}
</script>

ちなみに、最初の「非表示」状態に CSS を直接使用する方がはるかに効率的<div>です。ページの読み込み時に JavaScript を実行する必要はまったくありません。

<style>
.comment_form { display: none; }
</style>
<div class="comment_form">some content</div>

たとえばdisplay、イベントで JavaScript を使用して、後で要素のプロパティを変更することもできます。onClick

于 2013-10-06T13:00:29.283 に答える