Question

我正在编写一个由tampermonkey（或lublessmonkey）驱动的扩展脚本。我有一些功能，并附加了复选框，如果选中该复选框，则会触发特定功能。现在，如果我检查一次，我希望将其永久检查，直到我手动取消选中为止。

我尝试将其绑定到首页标题（因此它可以在整个网站上找到），但是一旦刷新/重新加载页面，我就需要再次对其进行检查，以便它可以运行。我还尝试将其绑定到另一个页面，但是要运行，我必须单击该页面并检查它，然后它只能运行一次。这是应该触发功能的部分代码：

$('<div>').addClass('class123').append(
    $('<input>').attr({
    type: 'checkbox',
    id: 'cbox1'
}).change(function() {
if ($(this).is(":checked")){
    myFunc();
}
});
),

以下是其中一个功能的示例：

myFunc(){
    if($('#id:contains("You are welcome!")').length > 0{
        window.location.href = "some.url";
    }
    else{
        window.location.href = "some.other.url";
    }
}

正如我所说，我希望它在检查后自动运行，直到我手动取消选中它为止。这些功能由几个基本参数组成（操纵脚本可在同一网站域内从页面跳到另一页面。

那么，如何使脚本检查是否选中了附加的checkbox元素，并且如果满足，则仅在满足函数内部条件的情况下重复执行函数？

谢谢。

Answer 1

.is(':checked')仅在运行时进行求值，因此，如果在执行脚本时未选中您的复选框，则它将永远不会触发。您需要将事件处理程序绑定到您的复选框元素，以便在选中或取消选中复选框时将其触发。

function myFunc() {
  console.log('Checked: ' + this.checked);
}

const $div = $('<div>').addClass('class123').append(
  $('<input>').attr({
    type: 'checkbox',
    id: 'cbox1'
  }).on('change', myFunc)
);

$div.appendTo('body');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您的代码中还存在语法错误，您缺少结尾)。尚不清楚您是要在代码中选择<div>还是创建新的<div>，但我认为您知道自己在做什么。

$('<div>')实际上创建了一个新元素，而没有将其附加到DOM。因此，如果您要选择预先存在的<div>，只需使用$('div')即可。您可以使用与上述相同的方法，或收听事件冒泡：

function myFunc() {
  console.log('Checked: ' + this.checked);
}

$('div').addClass('class123').append(
  $('<input>').attr({
    type: 'checkbox',
    id: 'cbox1'
  })
);

$('div').on('change', 'input[type="checkbox"]', myFunc);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

如果选中复选框，则执行功能

1 个答案: