Question

我是jQuery的新手，所以我面临的问题应该是相当直接的。基本上我想要完成的是在我的网站的DIV元素中加载各种简单的纯文本页面，并使用导航栏隐藏/取消隐藏这些单独的DIV。

使用脚本块正确加载DIV所请求的页面。但是，无法正常工作的是切换这些DIV块的可见性。我已经将它缩小为我创建的jQuery函数，当我引用任何DIV块时，它会阻止整个脚本调用。让我用代码片段更好地解释一下。

这是一些非常简单的代码，在单击菜单链接时，运行一个隐藏功能，然后显示相应的DIV元素。

    $( document ).ready(function() 
    {           
        console.log("document ready."); <-- does NOT get called with hideDivs()

        $('#button1').click(function(){
            hideDivs();
            $("#page1").show();
        }); 

        $('#button2').click(function(){
            hideDivs();
            $("#page2").show();
        });
    });

这是hideDivs（）函数，刚好在就绪函数之上：

    function hideDivs() 
    {
        $("#page1").hide(); <-- These lines cause the entire
        $("#page2").hide(); <-- <script> block to note get called.
    }

最后，在页面中间创建了一个脚本块 page1 和 page2 ：

<div id="page1"></div>
<div id="page2"></div>

<script>
    $("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
    $("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>

为什么顶级SCRIPT块会因hideDivs（）函数而失败？我已经尝试将它放在$（document）.ready函数中，没有任何变化。同样，如果函数是空白的，或者包含像'console.log'这样的简单函数，那么它可以工作，但是在引用DIV标签时它会中断。

更奇怪的是，使函数失败的代码，如果我只是重写代码就可以工作：

        $('#button1').click(function(){
            $("#page1").hide(); <-- This works fine
            $("#page2").hide(); <-- (page1 repeated to match function code)
            $("#page1").show();
        });

我有很多页面，所以我宁愿能够使用一个函数，因为没有大量的重复代码。

我的javascript控制台中没有显示错误。我仔细研究了StackOverflow和Google搜索的函数调用，但无法找到解决方案。我确信我已经犯了一个非常愚蠢的错误，所以任何帮助都会非常感激。

Answer 1

因此，不是隐藏你的div的整个函数，你可以简单地在每个函数上放一个类，并通过选择该类来隐藏它们。例如，每个页面Div给出一个class =“clickablePages”，然后执行：

$(".clickablePages").hide();

只会隐藏您已将类添加到的所有div。

至于重复每个按钮的所有按钮点击，您可以根据按钮的ID在一个功能中完成。您可以再次在所有按钮上放置一个类，通过选择类来触发该函数，然后在该函数中获取所需的ID。像这样的东西：

$('.buttonclick').click(function(){
        var pageID = $(this).attr('id');
        $("#page" + pageID).show();
    });

在这种情况下，如果您的按钮的ID为“1”或“2”与页码匹配，则只会显示该页码的div。希望这是有道理的。

如何正确调用使用HTML元素的jQuery函数？

1 个答案: