Question

您好
我正在尝试查看是否可以使用“ onClick”在函数中更改JavaScript代码的片段。是否可以使用onClick函数将“ filterCarsByColour ”更改为“ filterCarsByMake ”？
const filterMe = filterCarsByColour(cars)

const filterMe = filterCarsByMake(cars)

我无法在Web或Stackoverflow中找到理想的示例，因为大多数该示例仅包括更改innerHTML对象。因此，对任何其他职位的帮助，建议或方向将不胜感激。

Answer 1

最好不要分离这些选项，而要让用户能够选择要使用的过滤器类型，而不是尝试更改功能：

const filterBtn = document.querySelector('#filterBtn');
filterBtn.onclick = () => {
	const type = document.querySelector('#type').value;
  if (type === 'colour') {
  	// TODO: execute filterCarsByColour function
    console.log('running filter by colour...');
  } else if (type === 'make') {
  	// TODO: execute filterCarsByMake function
    console.log('running filter by make...');
  } else {
  	// ERROR: Type not defined
  }
};

<select id="type">
  <option value="colour">By Colour</option>
  <option value="make">By Make</option>
</select>
<button id="filterBtn">
Filter
</button>

Answer 2

您需要参数化您要使用的过滤功能：

const makeFilter = (filterFunction) => { ... };
const FilterMe = makeFilter(byCar)(cars, "Red");

makeFilter函数应返回两个参数函数，该函数将数据作为第一个参数，将过滤参数作为第二个参数（按照您的示例）。

不确定“ onClick”参考，但是如果您需要动态性，可以使用事件查看并选择：

const filteringFunctions = { 
   byCar() {}, 
   byColour() {} 
};

domNode.addEventListener("click", e => {
   const fn = filteringFunctions[e.target.getAttribute("data-filter")];
   if (typeof fn === "function") {

       // apply the filter if a function was found
       const filterMe = makeFilter(fn)(cars, "red");

   }
});

JavaScript onClick更改函数执行

2 个答案: