Question

我的HTML中有3个按钮，三个滑雪胜地各有一个。单击按钮后，我想显示相关信息。

<div id="buttonParent">
    <button id="btnStranda" type="button" value="0">Stranda</button>
    <button id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

我有这个工作，但是问题是我已经制作了3个独立的函数，我相信可以很容易地将它们变成1。

如果所有onclick事件都移到同一个函数，如何使该函数检测单击了哪个按钮，以便它显示正确的信息？

function boot() 
{
    document.getElementById("btnStranda").onclick = infoStranda;
    document.getElementById("btnOveroeye").onclick = infoOveroeye;
    document.getElementById("btnFjellseter").onclick = infoFjellseter;
}

Pastebin

Answer 1

当函数通过Event触发时，它们将参数传递给事件处理程序，通常命名为event或e，即事件本身。

e.currentTarget是指事件处理程序已附加到的元素。

document.querySelector('#foo').onclick = doSomething
document.querySelector('#bar').onclick = doSomething


function doSomething(e) {
  // log id of current target element of the click event
  console.log(e.currentTarget.id, ' was clicked')
}

<button id="foo">Foo</button>
<button id="bar">Bar</button>

或者，您也可以使用e.target来指代触发事件的元素。

Answer 2

您可以创建一个带有参数的函数，具体取决于单击的按钮。因此，点击侦听器仍然具有三个不同的功能。我认为这比在DOM节点上添加一些信息（类或id）以仅用一个函数来区分您的情况要好。

因此，保留三个函数，但调用一个泛型函数来执行泛型的事情。

例如：

function commonOperation(indexInContact) {
    // make your operations based on the param(s)
}

// And one of your function that listen a click will call common 
function infoStranda() {
    commonOperation(0)
    // Do specific Stranda things if needed
}

希望有帮助：）

Answer 3

您可以通过几种不同的方式来做到这一点。

如果您使用jQuery 选项3 也不错，我会实现选项1 的简单明了。

选项1：添加一个函数并将对象（自身）传递到其中

function displayInfoById(element) {
     console.log(element.value);
}

<div id="buttonParent">
    <button id="btnStranda" type="button" value="0" onclick="displayInfoById(this)">Stranda</button>
    <button id="btnFjellseter" type="button" value="1" onclick="displayInfoById(this)">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2" onclick="displayInfoById(this)">Overøye</button>
</div>

选项2：使用附加的事件处理程序获取事件currentTarget。

document.getElementById("btnStranda").onclick = displayInfo;
document.getElementById("btnOveroeye").onclick = displayInfo;
document.getElementById("btnFjellseter").onclick = displayInfo;

function displayInfo(event) {
  console.log(event.currentTarget.value)
}

<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

选项3：将类属性与jQuery事件处理程序.on('click'):

结合使用

$(".buttonClass").on('click', function(event) {
  console.log(event.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

进行识别单击哪个按钮的功能

3 个答案: