Question

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <link rel = "stylesheet" type="text/css" href="styles/css/style.css" />
</head>
<body>
<div>
    <select class="option_block" size="5" multiple="1">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
            <option>Option 5</option>
       </select>

       <div class="button_block" multiple="1">

            <button class="move_button" id="MoveAllToRight">>></button>
            <button class="move_button" id="MoveToRight">></button>
            <button class="move_button" id="MoveToLeft"><</button>
            <button class="move_button" id="MoveAllToLeft"><<</button>

       </div>

    <select class="option_block" size="5"></select>

</div>

<script src="scripts/javascript/script.js"></script>
</body>
</html>

这是我的JS脚本：

(function(){

function move(direction) {
..........
}

function moveAll(direction) {
...........
}


document.getElementById("MoveAllToRight").addEventListener("click", function () {
    moveAll('ToRight');
});

document.getElementById("MoveToRight").addEventListener("click", function () {
    move('ToRight');
});

document.getElementById("MoveToLeft").addEventListener("click", function () {
    move('ToLeft');
});

document.getElementById("MoveAllToLeft").addEventListener("click", function () {
    moveAll('ToLeft');
});


})();

我决定不显示move和moveAll功能的内容，因为它显然是过多的信息。

如何访问包含move和moveAll函数内的两个元素的“div”？我有一个使用“ID”的解决方案，但它不可扩展。

Answer 1

document.getElementById("MoveAllToRight").addEventListener("click", function(event) {
    moveAll(event, 'ToRight');
});

函数event.target内部将显示调用事件的元素。

Answer 2

除非您将事件侦听器明确地绑定到其他内容，否则'this'关键字将成为触发事件的元素。

所以你应该能够通过

来访问父div

this.parentElement

或者弄清楚如何使用你正在使用的任何图书馆来操作Dom

如何找出调用函数的元素（Javascript）

2 个答案: