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);
    }
  }
}

将耦合的耦合切换功能合二为一，切换功能不再起作用

1 个答案: