我可以使用 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);
}
答案 0 :(得分:2)
当然可以。
更改 onClick
事件:
onclick = "justOne(this)"
(this
用于将用户点击的元素发送给脚本)
并用一个函数替换 javascript:
function justOne(element) {
Sequence.appendChild(element.children[0].cloneNode(true));
}
(我们选择被点击元素的第一个子元素并克隆它)
就是这样!
LE:正如您在问题中提出的那样,我使用 eventListener
和 getElementsByClassName
添加了另一个使用不同方法的答案。
答案 1 :(得分:0)
<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);
}
答案 2 :(得分:0)
您也可以使用 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' 事件,因为它不再需要了。
这个方法是这样工作的:
[].forEach.call()
document.getElementsByClassName("Button")
element.addEventListener
方法为每个按钮添加一个事件侦听器;请记住,必须在按钮定义之后插入脚本。如果您在 head
部分插入脚本,它将不起作用,因为脚本运行但 DOM 尚未定义(没有可附加事件的按钮)。