Javascript 我可以用一个函数替换所有这些函数吗？_Javascript_Html

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

javascript html

Javascript 我可以用一个函数替换所有这些函数吗？,javascript,html,Javascript,Html,我是否可以使用eventListener和getElementsByClass创建一个对这些按钮执行相同操作的函数，而不是为每个按钮创建一个函数？任何解释都会有帮助，谢谢 <button class = "Button" onclick = "Ginga()"><span id = "Ginga" class = "Movements" >ginga</span><

我是否可以使用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);
}

ginga
基础
角色
否定的
函数Ginga（）{
var Ginga=document.getElementById（'Ginga'）；
var GingaCln=Ginga.cloneNode（真）；
顺序：appendChild（GingaCln）；
}
函数库（）{
var Base=document.getElementById（'Base'）；
var BaseCln=Base.cloneNode（true）；
Sequence.appendChild（BaseCln）；
}
函数角色（）{
var Role=document.getElementById（'Role'）；
var RoleCln=Role.cloneNode（true）；
Sequence.appendChild（RoleCln）；
}
函数a（）{
var negatia=document.getElementById（'negatia'）；
var NegativeAcln=Negativea.cloneNode（真）；
Sequence.appendChild（negativeacln）；
}

当然可以

将

onClick

事件更改为：

onclick = "justOne(this)"

（

此

用于将用户单击的元素发送到脚本）

并用一个函数替换javascript：

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

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

就这样

乐：我用不同的方法添加了另一个答案，使用了

eventListener

和

getElementsByClassName

，正如你在问题中所问的那样。

当然可以

     <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);
}

将

onClick

事件更改为：

onclick = "justOne(this)"

（

此

用于将用户单击的元素发送到脚本）

并用一个函数替换javascript：

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

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

就这样

乐：我用不同的方法添加了另一个答案，使用了

eventListener

和

getElementsByClassName

，正如你在问题中所问的那样。

ginga
     <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);
}

基础
角色
否定的
函数OneForAll（事件）{
var元素=event.target；
var elementCln=element.cloneNode（true）；
Sequence.appendChild（elementCln）；
}

ginga
基础
角色
否定的
函数OneForAll（事件）{
var元素=event.target；
var elementCln=element.cloneNode（true）；
Sequence.appendChild（elementCln）；
}

您还可以使用

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>

ginga
基础
角色
否定的
[]forEach.call（document.getElementsByClassName（“按钮”），函数（元素）{
元素。addEventListener（“单击”，函数（）{
Sequence.appendChild（this.children[0].cloneNode（true））；
});
});

请注意，我已经删除了

元素中的“onclick”事件，因为它不再需要了

此方法的工作原理如下：

<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>

我们调用Array类的forEach方法来迭代“类似数组”的元素：

[].forEach.call（）

使用

document.getElementsByClassName（“按钮”）

我们使用

元素向每个按钮添加一个事件侦听器
请记住，脚本必须插入按钮定义之后。如果在head
部分插入脚本，它将不起作用，因为脚本正在运行，但DOM尚未定义（没有可附加事件的按钮）。
您也可以使用事件侦听器
和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>

ginga
基础
角色
否定的
[]forEach.call（document.getElementsByClassName（“按钮”），函数（元素）{
元素。addEventListener（“单击”，函数（）{
Sequence.appendChild（this.children[0].cloneNode（true））；
});
});

请注意，我已经删除了
元素中的“onclick”事件，因为它不再需要了
此方法的工作原理如下：
<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>

我们调用Array类的forEach方法来迭代“类似数组”的元素：[].forEach.call（）
使用document.getElementsByClassName（“按钮”）
我们使用元素向每个按钮添加一个事件侦听器
请记住，脚本必须插入按钮定义之后。如果将脚本插入head
部分，它将不起作用，因为脚本正在运行，但DOM尚未定义（没有可附加事件的按钮）。
使用而不是分配多个事件侦听器 — 它更易于维护，并且适用于动态添加的元素。例如，使用an's。见和。您可以使用data-*
属性来存储目标ID。使用而不是分配多个事件侦听器 — 它更易于维护，并且适用于动态添加的元素。例如，使用an's。见和。您可以使用data-*
属性来存储目标ID。event.target已经是元素。您不需要获取其id并使用getElementById（），我不理解您的语句。请原谅，lupz基本上是说event.target==document.getElementById（event.target.id）
。换言之，您将获取节点，然后提取id，这样您就可以遍历DOM以找到您已经拥有的相同节点。这是一个浪费的过程好了，明白了。Thank.event.target已经是元素。您不需要获取其id并使用getElementById（），我不理解您的语句。请原谅，lupz基本上是说event.target==document.getElementById（event.target.id）
。换言之，您将获取节点，然后提取id，这样您就可以遍历DOM以找到您已经拥有的相同节点。这是一个浪费的过程好了，明白了。谢谢。这很有效！！！谢谢你，兄弟们，工作顺利！！！谢谢你，兄弟