需要帮助将代码片段隔离为JavaScript中的函数

Question

我有一个复选框，当选中时显示我页面上的一些内容。如果我取消选中，内容是隐藏的.

我试图将该函数的内部行为隔离到另一个函数中，以便我可以重用它:

$('#some-id').change(function(){
if ($(this).is(":checked")){
show();
} else {
hide();
}
});

这是我尝试过的:

$('#some-id').change(function(){
toggle();
});
function toggle() {
$(this).is(":checked") ? show() : hide();
}

但是现在它只适用于隐藏取消选中字段时显示内容，但它不显示再次检查字段时的内容。

有语法错误吗?

Answer 1

只是一个复选框对象传递给切换函数,否则不会知道切换的代码。

let $checkBox = $('#somecheckbox'); //get the checkbox
$checkBox.change(function (){
toggle($checkBox) //pass the checkbox to function
});
function toggle($checkBox) {
$checkBox.is(":checked") ? show() : hide();
}

你也可以在没有jQuery的情况下使用普通js来完成:

let checkbox = document.getElementById('someId');
checkbox.addEventlistener('change', () => {toggle(checkbox)});

function toggle(checkbox) {
checkbox.checked ? hide() : show();
}

Answer 2

将function toggle()中的$(this)改为$('#some-id')

$('#some-id').change(function() {
toggle();
});
function toggle() {
$('#some-id').is(":checked") ? show() : hide();
}