0

我在 .tpl 文件（“comment_form.tpl”）中有以下代码。该文件包含在 3 个不同的 .tpl 文件（“file_a”、“file_b”和“file_c”）中，每个文件一次。最后，这 3 个文件包含在另一个 .tpl 文件（“somefile.tpl”）中。

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

所以基本上，“comment_form.tpl”在“somefile.tpl”中加载了三次，如下所示：

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

问题是，代码第一次工作。如在“somefile.tpl”中加载“comment_form.tpl”的三个位置中，目标“div”仅在第一次隐藏。在接下来的两个地方，表单 (div) 没有隐藏。我希望我足够清楚。可能是什么原因？？

4

1 回答 1

1

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

似乎您正在通过 ID隐藏您的元素。请注意，ID必须是唯一的，如果您多次使用相同的 ID（#div在您的示例中），则只有第一个被 选择getElementById()。这就是你正在经历的。

您必须给每个<div>人一个唯一的 ID 或将它们与一个 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 回答