问题描述
我有以下代码: https://codesandbox.io/s/dropdown-forked-pojgt?file=/src/index.js
在这个例子中,我目前在 buildOptions
函数中嵌入了这两行:
const allOptions = document.querySelectorAll(".option");
allOptions.forEach((op) => op.addEventListener("click",selectOptions));
现在 selectOptions
将在点击时被激活。但是,由于我对函数式编程感兴趣,有没有办法让我将该逻辑与 buildOptions
函数分离?
此外,从代码的角度来看,上面代码和框中的代码是一种组织代码的好方法吗?
编辑: HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<Meta
name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no"
/>
</head>
<body>
<div id="root">
<div class="optionBox">Select an option</div>
</div>
<div id="result"></div>
<hr />
<div id="details">
<p>What we're building</p>
<div style="display: flex; align-items: flex-start;">
<img src="https://i.imgur.com/AXoKKc5.png" width="122" />
<img src="https://i.imgur.com/mZwI3g0.png" width="123" />
<img src="https://i.imgur.com/S1LU4yf.png" width="106" />
</div>
<ul>
<li>A dropdown can have multiple options</li>
<li>
You must be able to handle the dropdown changing to a new value and
display it somewhere
</li>
<li>
you may change public/index.html if you wish to start with specific
markup
</li>
</ul>
</div>
</body>
</html>
JS:
import "./index.css";
// Assertions
// #root exists in the DOM as a node you can access
function optionBox(node,options = {}) {
let curr = 0;
node.addEventListener("click",buildOptions);
let optionsWrapped = null;
//buildOptions
function buildOptions() {
optionsWrapped = document.createElement("div");
optionsWrapped.classList.add("optionsWrapped");
curr = curr + 1;
if (curr % 2 === 1) {
for (let option in options) {
const optVal = options[option];
const optionDiv = document.createElement("div");
optionDiv.classList.add("option");
optionDiv.textContent = optVal;
optionsWrapped.appendChild(optionDiv);
}
node.appendChild(optionsWrapped);
const allOptions = document.querySelectorAll(".option");
allOptions.forEach((op) => op.addEventListener("click",selectOptions));
} else {
node.removeChild(node.childNodes[1]);
}
}
function selectOptions(e) {
const replacednode = document.createElement("div");
replacednode.textContent = e.target.textContent;
replacednode.classList.add("replacednode");
node.replaceWith(replacednode);
}
return node;
}
optionBox(document.querySelector(".optionBox"),{
op1: "option 1",op2: "option 2",op3: "option 3"
});
CSS:
.optionBox {
border: 1px solid black;
width: 200px;
height: 30px;
margin-bottom: 100px;
}
.optionsWrapped {
border: 1px solid blue;
width: 100px;
height: 80px;
margin-top: 10px;
}
.replacednode {
border: 1px solid black;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)