Question

我在.tpl文件中有以下代码（＆＃34; comment_form.tpl＆＃34;）。此文件包含在3个不同的.tpl文件中（＆＃34; file_a＆＃34;，＆＃34; file_b＆＃34;和＃34; file_c＆＃34;）。最后这3个文件包含在另一个.tpl文件中（＆＃34; somefile.tpl＆＃34;）。

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

基本上，＆＃34; comment_form.tpl＆＃34;在＆＃34; somefile.tpl＆＃34;中加载三次像这样：

        .....
    </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).

问题是，代码第一次运行。就像在＆＃34; comment_form.tpl＆＃34;加载到＆＃34; somefile.tpl＆＃34;，目标＆＃39; div＆＃39;只是第一次隐藏。在接下来的两个地方，表格（div）不被隐藏。我希望我足够清楚。可能是什么原因？

Answer 1

在整个网页中进行多次$(document).ready(function() {})来电是完全合法的。

您似乎隐藏了ID 元素。请注意，ID 必须是唯一的，如果您多次使用相同的ID（示例中为#div），则{em>仅{{> {{ 1}}。这就是你所经历的。

您必须为每个getElementById()提供一个唯一ID，或将它们与CSS类组合在一起并隐藏整个类。

以下是使用CSS类的示例：

<div>

顺便说一句，直接使用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>的初始“隐藏”状态会更有效率。根本不需要在页面加载时执行JavaScript：

<div>

您仍然可以稍后通过<style> .comment_form { display: none; } </style> <div class="comment_form">some content</div>事件中的JavaScript更改元素的display属性。

document.ready只在页面加载时工作一次

1 个答案: