如何重构我的代码，使其不重复相同的事情

Question

我的页面上有3个不同的按钮，当你点击其中一个时，它会检查相应的单选按钮。

目前，我有每个按钮与自己的onclick功能:

onclick="radioChecked1()"
onclick="radioChecked2()"
onclick="radioChecked2()"

然后是函数:

function radioChecked1() {
var package1 = document.querySelector("#package1");
package1.setAttribute("checked", 1);
}
function radioChecked2() {
var package2 = document.querySelector("#package2");
package2.setAttribute("checked", 1);
}
function radioChecked3() {
var package3 = document.querySelector("#package3");
package3.setAttribute("checked", 1);
}

这些函数都在做同样的事情，唯一改变的是它所选择的输入id中的数字。
我肯定有办法把它简化成一个函数，而不是为每个按钮单独一个函数，我不知道怎么做。

Answer 1

您可以通过简化函数和使用参数来重构这段代码:

function radioChecked(id) {
var package = document.querySelector(id);
package.setAttribute("checked", 1);
}

然后在按钮上调用相应id的函数:

onclick="radioChecked('#package1')" onclick="radioChecked('#package2')" onclick="radioChecked('#package3')"

Answer 2

这有点取决于你的标记是如何编写的，但是如果你添加数据属性到按钮和单选按钮，你可以从按钮被点击时获取id，然后在单选输入中找到相应的id。

这里，我将按钮和单选输入包装在它们自己的容器中，这样我就可以使用事件委托——在父容器中添加一个侦听器，在其子元素冒出DOM时捕获其子元素的事件，而不是将侦听器附加到所有元素的

。

// Instead of inline JS we cache the containers elements
// and then add one listener to the buttons container
const radios = document.querySelector('.radios');
const btns = document.querySelector('.btns');
btns.addEventListener('click', handleClick);
// If the clicked element is a button
// extract its id from its dataset, look for
// the corresponding radio input, and update the
// `checked` property
function handleClick(e) {
if (e.target.matches('button')) {
const { id } = e.target.dataset;
const radio = radios.querySelector(`[data-id="${id}"]`);
radio.checked = true;
}
}

fieldset { margin-top: 1em; }

<fieldset class="btns">
<legend>Buttons</legend>
<button data-id="radio1" type="button">Button 1</button>
<button data-id="radio2" type="button">Button 2</button>
<button data-id="radio3" type="button">Button 3</button>
</fieldset>
<fieldset class="radios">
<legend>Radio buttons</legend>
<label for="radio1">Radio1
<input data-id="radio1" type="radio" name="radioset">
</label>
<label for="radio2">Radio2
<input data-id="radio2" type="radio" name="radioset">
</label>
<label for="radio3">Radio3
<input data-id="radio3" type="radio" name="radioset">
</label>
</fieldset>

附加文档

• querySelector

• addEventListener

• matches

• 解构作业