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

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 控制台，我收到此错误：

未捕获类型错误：无法调用 null 的“ready”方法

它指向上面使用ready函数的代码行。

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

JavaScript 调试器：作为页面提供
菜单图标 0 开发人员 - 调试
JavaScript 调试器提供了
您可以从中设置命令提示符
断点、回溯等等。类型
调试器命令行的帮助
开始吧。

来自此处，

如果 jquery 不存在，则可能会发生错误t已加载：

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

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

它应该弹出该对象...

Answer 4

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

Answer 5

你的代码对我来说效果很好。正如其他人所说，您收到的错误听起来像是未找到/加载 jquery.js 文件。
这是一个不太可能的情况，但如果您使用的是 Windows，请检查 jquery.js 文件的属性，并查看第一个选项卡上是否有一个取消阻止按钮。单击它。

Answer 6

由于这个老问题似乎仍未得到解答，我想我会试试运气。

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