0

我正在为 google chrome 编写扩展程序。

我有一个包含以下内容的 options.html：

<html>
<head>
    <title>Test Options Menu</title>
    <script src="chromeoptions.js"></script>
</head>
<body>

<div id="options">
    <div id="form">
        <input type="checkbox" id="test">
        <div id ="testEvents" style="display:'none'">
            blabla
        </div>
    </div>
</div>
</body>
</html>

Chromeoptions.js 里面有这个：

function clicked(string) {
    console.log('clicked');
    if (document.getElementById(string).checked == true) {
        document.getElementById(string + 'Events').style.display = '';
    }
    else document.getElementById(string + 'Events').style.display = 'none';

}
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('test').addEventListener('click', clicked('test'));
});

发生的情况是：在第一次加载时，'click' 事件处理程序触发，导致 div 'testEvents' 消失。之后，当我切换复选框时没有任何反应。事件处理程序不会触发。我使用“click”还是“onchange”都没关系。

我还尝试将 scripttag 移动到 html 的底部并将“click”事件处理程序放在“DOMContentLoaded”事件处理程序之外，但这也没有改变任何东西。

那么当我切换复选框时如何让事件处理程序触发呢？

4

3 回答 3

2

to 的第二个参数addEventListener必须是一个函数。您clicked()立即调用，而不是传递调用它的函数。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('test').addEventListener('click', function() {clicked('test')});
});
于 2013-07-05T17:23:56.667 回答
0

你有

<div id ="testEvents" style="display:'none'">

也许尝试：

<div id ="testEvents" style="display:none">
于 2013-07-05T17:26:48.993 回答
0

或者，如果您希望它使用 jquery：

添加：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

并使用：

$.fn.toggleDiv = function () {

        $(this).each(function () {

            var target = $(this);

            $(target).on('click', function () {
                $('#' + $(target).attr('id') + 'Events').toggle($(target).is(':checked'));
            });
        });
    };

$('input[type=checkbox]').toggleDiv();

它适用于多个事件复选框：

<div id="options">
    <div id="form">
        <input type="checkbox" id="test">
        <div id ="testEvents" style="display:none">
            blabla1
        </div>

        <input type="checkbox" id="test2">
        <div id ="test2Events" style="display:none">
            blabla2
        </div>
    </div>
</div>
于 2013-07-05T17:34:45.960 回答