0

我试图让这些 jQuery 命令稍后通过 html 中的链接执行：

                $(document).ready(function(){
                    $('#2wa').click(function() {
                           $('#ownstream').hide();
                           $('#movstream').hide();                               
                           $('#2wastream').fadeIn();                               
                    });
                $(document).ready(function(){                      
                    $('#own').click(function() {
                            $('#2wastream').hide();
                            $('#movstream').hide();
                            $('#ownstream').fadeIn();
                            return false;
                    });
                $(document).ready(function(){
                    $('#mov').click(function() {
                            $('#2wastream').hide();
                            $('#ownstream').hide();                                     
                            $('#movstream').fadeIn();
                            return false;
                    });

这三个选择器命令应该隐藏两个项目并在显示第二行上的 ID 时显示一个，但是当我单击它时没有任何反应。链接的格式如下：

                        <a href="test/#" id="own">

以及这样显示/隐藏的元素：

                        <div id="ownstream"></div>

对于这些我有两个问题：链接本身没有导致任何更改发生，并且在页面加载时没有发生任何更改，导致所有三个元素都出现。我该如何解决这个问题？另外，我应该将 jquery 脚本放在头部还是身体下方？

4

3 回答 3

0

您应该将您的 jquery 脚本放在您的 head 标签中。然后你可以在它下面的任何地方使用这个代码。

确保您的锚标记具有匹配的 ID 名称，如下所示：

<a href="" id="2wa">

并不是：

<a href="" class="2wa">

对于要在加载时隐藏的链接，请使用以下命令：

$(document).ready(function(){
    $('#2wastream').hide();
    $('#ownstream').hide();                                     
});

或者像这样添加一个 CSS 样式属性：

    <a href="" id="2wastream" style="display:none;">
于 2012-12-22T16:19:09.033 回答
0

您可以尝试做一些事情来使其正常工作。

确保您的脚本被拉入页面，一种检查方法是使用 Chrome 调试器中的“源”选项卡并在 html 头部分中搜索其他文件

确保在包含 jQuery 之后包含了 datatale 脚本，因为它肯定依赖于它。

检查是否正确包含 jQuery，并且只包含一次。

注意 jQuery 冲突。还有一些其他库覆盖了 $，因此您的代码无法正常工作，因为 $ 不再是 jQuery 的别名。您可以使用 jQuery.noConflict() 来避免与页面上使用相同变量 $ 的其他库发生冲突。

根据您的代码，为什么不将所有代码拉到一个文档中。准备好并正确关闭它，如下所示

 $(document).ready(function(){

                    $('#2wa').click(function() {
                           $('#ownstream').hide();
                           $('#movstream').hide();                               
                           $('#2wastream').fadeIn();                               
                    });


                    $('#own').click(function() {
                            $('#2wastream').hide();
                            $('#movstream').hide();
                            $('#ownstream').fadeIn();
                            return false;
                    });


                    $('#mov').click(function() {
                            $('#2wastream').hide();
                            $('#ownstream').hide();                                     
                            $('#movstream').fadeIn();
                            return false;
                    });
});

最后确保您引用的元素（2wastream、ownstream、movstream）确实与 id 一起存在。

于 2012-12-22T16:30:00.277 回答
0

首先，您没有正确关闭$(document).ready(function(){ 第二个，您只需要其中一个..不是每个绑定一个..

最后为链接添加一个公共类，例如stream-opener

<a href="test/#" id="own" class="stream-opener"> 
<a href="test/#" id="mov" class="stream-opener">

另一个关于显示/隐藏的元素

<div id="ownstream" class="stream"></div>
<div id="movstream" class="stream"></div>

并使用这个脚本

$(document).ready(function(){
   $('.stream-opener').click(function(e){
       e.preventDefault();
       var targetStream = '#' + this.id + 'stream';
       $('.stream').hide().filter( targetStream ).fadeIn();
   });
});
于 2012-12-22T16:32:22.417 回答