Question

有没有一种更好的方法可以通过简单地折叠/切换div并显示/隐藏其内容来替换这种js函数？

$(function() {
           $('#destselect').change(function(){
                $('.dest').hide();
                $('#' + $(this).val()).show();
           });
      });

Answer 1

发生这种情况的原因是因为您的js文件在页面的顶部被调用。

因此，document.getElementsByClassName('collapsible');，colls导致空数组，因为尚未创建主体中的元素。

您可以创建一个单独的js文件并将其添加到正文的末尾（通过这种方式，您可以确保在执行javascript时创建了coll），也可以将代码包装在DOMContentLoaded上事件监听器，将在文档完全加载后触发您的代码。

Answer 2

我的猜测是，您是在浏览器完成加载dom临时内容之前加载脚本的，因此当它运行元素时，它试图向其添加事件侦听器，但尚不存在。

尝试将您所有的javascript封装在此文件中：

document.addEventListener("DOMContentLoaded", function(event) { 
  // all your code goes here
});

以上内容可确保在加载页面上的所有元素之后运行脚本。

Answer 3

您可以在HTML文件的标题中添加一个脚本标签，这会将JS文件导入到当前页面，如下所示 <script src="File1.js" type="text/javascript"></script> 然后，在按钮的onclick中或页面的另一个脚本中（通常在底部）调用函数。像这样：


<body>
 ...
 <script type="text/javascript">
   functionFromFile1()
 </script>
</body>

Answer 4

由于缺少变量，您的脚本似乎无法正常执行。

在此脚本https://www.argentina-fly.com/js/scripts.js
中函数Naves中的UpdateDetailsDestination()变量未定义。

我认为您应该先解决此问题，然后再检查您的进一步代码是否正常工作。请在运行页面时查看控制台。您会在那里看到所有与JavaScript相关的错误。

用JS隐藏/显示内容的替代方法？

4 个答案: