组合的情侣切换功能合并成一个，切换功能不再起作用

Question

我已将几个功能合并为一个功能。 当另一个选择块被选中时，旧功能被隐藏了两个选择块。

它看起来是这样的：

function toggle1(){ 
    if (getValue(elems.sel1) !== 0) { // <-- This function is getting the values of the selectfields 
     toggleVisibility(elems.sel2, true); // <-- This function is defining wether to hide or to show this selectfield 
     toggleVisibility(elems.sel3, true); 
    } else { 
     toggleVisibility(elems.sel2, false); 
     toggleVisibility(elems.sel3, false); 
    } 
} 

函数调用是这样的：

elems.sel1.addEventListener("change", toggle1); 

我改变了功能到这一点：

function toggle(element, select1, select2) { 
    if (getValue(element) !== 0) { 
     toggleVisibility(select1, true); 
     toggleVisibility(select2, true); 
    } else { 
     toggleVisibility(select1, false); 
     toggleVisibility(select2, false); 
    } 
} 

调用此函数现在看起来如：

elems.sel1.addEventListener("change", toggle(elems.sel1, elems.sel2, elems.sel3)); 

看起来很不错，所有..给我没有错误或如此以来..但是，切换不切换！也许有人能告诉我我在这里做错了什么？

如果需要的话：你可以在JS FIDDLE

Answer 1

原因toggle1正在寻找完整的代码是因为你把它当作一个函数引用到addEventListener。

// toggle1 is passed as a reference to a function 
// notice no() after it 
elems.sel1.addEventListener("change", toggle1) 

原因toggle不工作是因为你第一次调用，然后传递任何返回（这是undefined）为addEventListener。

// toggle is called first (notice() after toggle) 
// then its result is passed as the handler 
elems.sel1.addEventListener("change", toggle(elems.sel1, elems.sel2, elems.sel3)); 

这被称为第一toggle(elems.sel1, elems.sel2, elems.sel3)，然后侦听器为无论是从那里返回传递：

elems.sel1.addEventListener("change", undefined); 

你可以做的是让toggle返回的处理函数和侦听器将火：

function toggle(element, select1, select2) { 
    return function() { // <--- return a function 
    if (getValue(element) !== 0) { 
     toggleVisibility(select1, true); 
     toggleVisibility(select2, true); 
    } else { 
     toggleVisibility(select1, false); 
     toggleVisibility(select2, false); 
    } 
    } 
}