构建一个全能函数来渲染

Question

我目前正在尝试渲染使用复选框作为过滤的日历。如果我这样做，我的所有过滤器都可以工作：

//Call my render event on click of a checkbox
$('.filterable-content__criteria').on('change', function(){
    $('#calendar').fullCalendar('rerenderEvents');
});

每次点击一个复选框时都会这样，它会重新呈现我的日历 - 从而显示/隐藏事件。现在我相对静态地做这个，在我的渲染功能中我这样做：

var eventAcceptedClasses = [];
if ($('input#Event-Type-2').is(':checked')){
    eventAcceptedClasses.push(id);
    displayEvent = false;
} else if ($('input#Event-Type-2').is(':checked')){
    eventAcceptedClasses.push('Event-Type-2');
    displayEvent = false;
} else if ($('input#Event-Type-3').is(':checked')){
    eventAcceptedClasses.push('Event-Type-3');
    displayEvent = false;
}  else {
    //If none checked, show all.
    eventAcceptedClasses.push('fc-event');
    displayEvent = true;
};

令人遗憾的是，这个功能不具备可扩展性。我希望在渲染时实现它，它会获取被单击的复选框的id，然后将其插入到函数中，即：您在click事件中设置id，如下所示

var cb_click = event.target.id

然后我的渲染看起来像这样：

var eventAcceptedClasses = [];
if ($('input#'+cb_click ).is(':checked')){
    eventAcceptedClasses.push(cb_click);
    displayEvent = false;
}

但是考虑到函数嵌套的方式，由于代码的结构，这似乎不起作用。

关于我如何做到这一点的任何想法？我添加了 JS Fiddle ，其中显示了完整的结构以供澄清。

编辑：

基本输入结构

<input class="filterable-content__criteria" type="checkbox" name="categories" value="Event Type 1" id="Event-Type-1">

Answer 1

如果您可以修改html，那么在输入中添加onchange属性即可。

理解起来要简单得多，并且比事件监听器或冗余测试if else更适合内存使用。

在一个简短的例子中，仅使用javascript，调用一个传递当前单击元素的id的函数。

//Call my render event on click of a checkbox

function call_render(me){

    console.log(me)
    /* eventType1 */
    
    // me.fullCalendar('rerenderEvents');
}

Tick: <input onchange="call_render(this.id)" id="eventType1" class="filterable-content__criteria" type="checkbox" name="categories" value="Event Type 1">

有时我们无法从源代码修改html。

当设置了太多属性时，html也会变得有点不可读。

当在html属性中编写javascript时修复东西和可读性也不太好，就像前面的例子一样。

需要在DOM级别设置属性。这是更好的做法。有替代方案，但首先使用html功能总是更好。

// DOM now ready

// Set the onchange attribute to the element *eventType1*.
// And give this attribute a function when a change happen

eventType1.setAttribute("onchange","call_render(this.id)")

//Call my render event on click of a checkbox

function call_render(me){

    console.log(me)
    /* eventType1 */
    
    // me.fullCalendar('rerenderEvents');
}

Tick: <input class="filterable-content__criteria" type="checkbox" name="categories" value="Event Type 1" id="eventType1">

验证或测试复选框状态：

console.log( (eventType1.checked) )

console.log( !(eventType1.checked) )

Tick: <input id="eventType1" type="checkbox" checked="">

同样，我们也可以像这样设置一个全局事件处理程序：

eventType1.oninput = (function() {
     call_render(this.id)

  })

Js性能测试，比较3种方法。 我删除了querySelector，内联onchange更快。 https://jsperf.com/global-vs-event-vs-inline