Question

我可以使用 eventListener 和 getElementsByClass 创建一个对这些按钮执行相同操作的函数，而不是为每个按钮都设置一个函数吗？任何解释都会有所帮助，谢谢！

     <button class = "Button" onclick = "Ginga()"><span id = "Ginga" class = "Movements" >ginga</span></button>
     <button class = "Button" onclick = "Base()"><span id = "Base" class = "Movements" >base</span></button>
     <button class = "Button" onclick = "Role()"><span id = "Role" class = "Movements" >role</span></button>
     <button class = "Button" onclick = "Negativa()"><span id = "Negativa" class = "Movements" >negativa</span></button>
    <div id = "SequenceContainer">
    <div id = "Sequence"></div>
    </div>

function Ginga() {
    var Ginga = document.getElementById('Ginga');
    var GingaCln = Ginga.cloneNode(true);
    Sequence.appendChild(GingaCln);
}
function Base() {
    var Base = document.getElementById('Base');
    var BaseCln = Base.cloneNode(true);
    Sequence.appendChild(BaseCln);
}
function Role() {
    var Role = document.getElementById('Role');
    var RoleCln = Role.cloneNode(true);
    Sequence.appendChild(RoleCln);
}
function Negativa(){
    var Negativa = document.getElementById('Negativa');
    var NegativaCln = Negativa.cloneNode(true);
    Sequence.appendChild(NegativaCln);
}

Answer 1

当然可以。

更改 onClick 事件：

onclick = "justOne(this)"

（this 用于将用户点击的元素发送给脚本）

并用一个函数替换 javascript：

function justOne(element) {
  Sequence.appendChild(element.children[0].cloneNode(true));
}

（我们选择被点击元素的第一个子元素并克隆它）

就是这样！

LE：正如您在问题中提出的那样，我使用 eventListener 和 getElementsByClassName 添加了另一个使用不同方法的答案。

Answer 2

     <button class = "Button" onclick = "OneForAll()"><span id = "Ginga" class = "Movements" >ginga</span></button>
     <button class = "Button" onclick = "OneForAll()"><span id = "Base" class = "Movements" >base</span></button>
     <button class = "Button" onclick = "OneForAll()"><span id = "Role" class = "Movements" >role</span></button>
     <button class = "Button" onclick = "OneForAll()"><span id = "Negativa" class = "Movements" >negativa</span></button>
    <div id = "SequenceContainer">
    <div id = "Sequence"></div>
    </div>

function OneForAll(event) {
  var element = event.target;
  var elementCln = element.cloneNode(true);
  Sequence.appendChild(elementCln);
}

Answer 3

您也可以使用 eventListener 和 getElementsByClass（如您所问）这样做：

<button class = "Button"><span id = "Ginga" class = "Movements" >ginga</span> </button>
<button class = "Button"><span id = "Base" class = "Movements" >base</span></button>
<button class = "Button"><span id = "Role" class = "Movements" >role</span></button>
<button class = "Button"><span id = "Negativa" class = "Movements" >negativa</span> </button>
<div id = "SequenceContainer">
<div id = "Sequence"></div>
</div>

<script>
[].forEach.call(document.getElementsByClassName("Button"), function (element) {
    element.addEventListener("click", function () {
        Sequence.appendChild(this.children[0].cloneNode(true));
    });
});
</script>

请注意，我已经删除了 <button> 元素中的 'onclick' 事件，因为它不再需要了。

这个方法是这样工作的：

我们调用 Array 类的 forEach 方法，以迭代“类似数组”的元素：[].forEach.call()
按钮列表是使用 document.getElementsByClassName("Button")
我们使用 element.addEventListener 方法为每个按钮添加一个事件侦听器；

请记住，必须在按钮定义之后插入脚本。如果您在 head 部分插入脚本，它将不起作用，因为脚本运行但 DOM 尚未定义（没有可附加事件的按钮）。

我可以用一个函数代替所有这些函数吗？

3 个答案: