Question

我正在尝试通过html中的链接执行这些jQuery命令：

                $(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脚本放在头部还是身体下方？

Answer 1

您应该将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;">

Answer 2

您可以尝试使用此功能。

确保您的脚本被拉入页面，一种检查方法是使用Chrome调试器中的“来源”标签，然后在html主题部分中搜索其他文件

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

检查jQuery是否正确包含且仅一次。

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

根据您的代码，为什么不将所有代码都拉到一个document.ready中并正确关闭，如下所示

 $(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中。

Answer 3

首先，你并没有关闭$(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();
   });
});

在HTML链接中调用jQuery选择器？

3 个答案: