将两个切换功能合并为一个，切换不再起作用

Combined couple toggle functions into one, toggle doesn't function anymore

本文关键字：一个 不再 起作用 合并 两个 功能      更新时间：2023-09-26

我将两个函数合并为一个函数。旧的函数是用来在选择另一个选择块时隐藏两个选择块。

它看起来像这样:

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

找到完整的代码

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);
    }
  }
}
相关文章：