Question

我一直试图在我的浏览器动作弹出窗口中显示和隐藏（可能是切换）选项但没有成功。下面的代码是我弹出窗口的主体

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
<div class="show">
    <a href="#" class="showcontent">Show</a>
    <a href="#" class="hidecontent">Hide</a>
    <div class="somecontent">
        <p>some content<br />
            <a href="#">Link</a><br />
        </p>
    </div>
</div>

popup.js文件包含以下内容：

$(document).ready(function(){
    $(".somecontent").hide();
    $(".showcontent").click(function(){
        $(".somecontent").show();
    });

    $(".hidecontent").click(function(){
        $(".somecontent").hide();
    });
});

我认为问题在于Chrome API在我的popup.js文件中遇到问题。正文出现在我的弹出窗口中，但“显示”和“隐藏”操作不起作用。任何想法如何使这项工作，如果没有，另一种方法来获得相同的结果（即：点击切换）？

编辑：从javascript控制台，错误我收到此错误：

未捕获的TypeError：无法调用null的方法'ready'

使用ready函数指向上述代码行。

Answer 1

对于$()函数的使用，jQuery也可能与页面中的其他内容冲突。（我自己也遇到了这个问题。）如果是这种情况，将$()调用更改为jQuery()可以解决问题。

Answer 2

可能popup.js导致解析/执行错误？尝试查看chrome是否可以打印错误：

JavaScript控制台：点击页面   菜单图标并选择开发人员 -   JavaScript控制台。从这里开始，你会   能够查看中的错误   执行JavaScript，然后输入   其他JavaScript命令   执行。

JavaScript调试器：以页面形式提供   menu icon 0开发人员 - 调试   JavaScript，调试器提供了一个   命令提示符，您可以从中设置   断点，回溯等等。类型   帮助调试器命令行   开始吧。

来自here

如果未加载jquery，可能会发生错误：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script>alert($(document))</script>

它应该弹出对象......

Answer 3

由于您既没有从点击处理程序返回false，也没有调用preventDefault()，因此点击后会重新加载该页面，.somecontent将再次隐藏。将您的JS更改为以下内容：

$(document).ready(function(){
    $(".somecontent").hide();
    $(".showcontent").click(function(){
        $(".somecontent").show(); return false;
    });

    $(".hidecontent").click(function(){
        $(".somecontent").hide(); return false;
    });
});

Answer 4

该错误意味着jQuery未正确加载。检查以确保它被称为jquery.js并存储在根文件夹中。

Answer 5

您的代码对我来说很好。正如其他人所说，你得到的错误听起来像jquery.js文件没有找到/加载。这是一个很长的镜头，但如果您在Windows上，请检查jquery.js文件的属性，并查看第一个选项卡上是否有取消阻止按钮。点击它。

Answer 6

由于看起来这个老问题仍未得到回答，我以为我会试试运气。

您是否尝试过再次下载jquery.js（文件可能已损坏）。另外，如果你仍然有兴趣解决它，你可以将你的src发布到某个地方供我们阅读（如http://jsfiddle.net/）

使用jQuery在Chrome扩展程序弹出窗口中显示隐藏div

6 个答案: