0

我是使用 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() 函数，就在 ready 函数之上：

    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 搜索的函数调用，但找不到解决方案。我确定我犯了一个我忽略的非常愚蠢的错误，所以任何帮助将不胜感激。

4

1 回答 1

0

因此，您可以简单地在每个上放置一个类，然后通过选择该类来隐藏它们，而不是隐藏您的 div 的整个功能。比如每个页面Div给一个class="clickablePages"，然后做：

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

这将简单地隐藏您已将类添加到的所有 div。

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

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

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

于 2013-11-05T11:27:29.177 回答